Как я могу проверить <input type="file"> с Angular2?

Ответ 1

Validators.required зависит от значения поля.

Тип ввода file не имеет значения, поэтому считается undefined или null.

Вот почему это неверно. Лучше напишите свою собственную проверку.

Для специального файла пример проверки см.

Ответ 2

Примером валидатора для использования с атрибутом normal require может быть что-то вроде этого

import { Provider, forwardRef, Directive } from '@angular/core';
import { NG_VALIDATORS, Validator, Control } from '@angular/common';
export const NO_ATTACHMENT_VALIDATOR = new Provider(NG_VALIDATORS,{
  useExisting: forwardRef(() => noAttachmentValidator ),
  multi: true
});

@Directive({
  selector: '[noAttachmentValidator][ngControl],[noAttachmentValidator][ngFormControl],[noAttachmentValidator][ngModel]',
  providers: [NO_ATTACHMENT_VALIDATOR]
})

export class noAttachmentValidator implements Validator{
  public validate(control: Control) : { required: { [key: string]: boolean } | null } {
    let state,
        value = control.value,
        alreadyUsed = control.dirty;

    if(alreadyUsed && value.length == 0){
      state = true;
    }
    return state ? { required : { 'required' : false } } : null
  }
}

В основном необходимый атрибут проверяет первый раз, это каждый раз после этого вы использовали вход в первый раз, даже если вы удалили файл (это была моя проблема), для управления значением является значение null. И когда он не затрагивает его значение null, он становится заполненным, когда вы добавляете файл, но если вы его удаляете, это просто пустой массив, поэтому []! == null. Я надеюсь, что это поможет в этом, вы можете создать собственный тип проверки, если вам нужно.

Ответ 3

Одним из замечательных решений для решения этой проблемы является создание настраиваемого элемента, который переносит и реализует ValueAccessor. Таким образом вы можете создать настраиваемый компонент, который работает точно так же, как и другие элементы формы. Вместо использования входного значения вы можете использовать другую переменную внутри вашего компонента.

Дополнительная информация здесь: Применение директив формы angular2 к элементам пользовательской формы ввода