Реактивная проверка формы с использованием Custom Validator в Angular 4

Question

У меня есть форма с двумя полями... один представляет собой группу из 3 флажков (из которых одно должно быть выбрано), а другой тип ввода в виде файла (который должен быть выбран). Я использую для них настраиваемые валидаторы реактивной формы, и только после того, как в форму добавлены значения поперов, я должен включить кнопку отправки. Но валидаторы, похоже, не работают.

HTML-страница:

<input type="file"  id="selectFile" #selectFile accept=".zip" formControlName ="fileUpload" name="file" class="form-control"  class="btn" value="file" required />
<span *ngFor="let tool of toolTypeList">
  <label class="checkbox-inline col-md-2 " style = "text-align: left;padding-left:35px"> 
    <input type="checkbox"  formControlName ="selectTool"
      name="{{tool.toolType}}" 
      value="{{tool.toolType}}"
      (change)="change($event, tool)">
      {{tool.toolType}}
  </label>
</span>

Составная часть:

this.rForm = fb.group({
  'selectTool': new FormControl('', [
    Validators.required,
    this.validateTools
  ]),
  ' fileUpload': new FormControl('', [
    Validators.required,
    this.noFilePresent
  ]),
});

Оценщики:

noFilePresent(): Boolean {
  if (this.fileuploaded.size <= 0) {
    return true;
  }
  return false;
}

validateTools(c: AbstractControl) {
  console.log('here in custom validator : ' + c.value);
  let response: any = null;
  if (c.value == null) {
    response = this.selectedTools.length > 0 ? null : {
      validateTools: {
        valid: false
      }
    };
  }

Я предполагаю, что для поля fileUpload созданный валидатор неверен по своей структуре, так как никакой объект formcontrol не передается в качестве параметра. Но с предположительно правильной структурой валидатора checkbox (selectTool), это не работает. Пожалуйста, помогите мне найти мою ошибку. Заранее спасибо.

Answer 1

Я создал свои собственные валидаторы, как это. Может быть в вашем классе, если они вам нужны только там и относятся к вам так же, как вы.

private noFilePresent(): ValidatorFn {
    return (control: AbstractControl): { [key: string]: any } => {
        if(control.value == null || control.value.length == 0) {
            return {'uploadInvalid': {value: control.value}};
        }
        return null;
    }
}

Я думаю, что значение control.value здесь может быть любым значением. Затем вы можете проверить, есть ли ошибка, используя геттер

 get upload() { return this.rForm.get('fileUpload'); }

и где-то еще

 if(this.upload.errors.uploadInvalid) {
     // do stuff or return error message or something
 }