动态反应形式的自定义验证器不起作用

时间:2021-05-06 04:23:20

标签: javascript angular typescript angular-reactive-forms

我正在尝试为开始时间和结束时间设置自定义验证器,但错误未显示在 html 中。我的动态表单中有开始日期、结束日期、开始时间和结束时间字段。当用户输入相同的开始和结束日期并且开始时间大于结束时间时,应该显示该时间错误。为此,我设置了一个类似这样的自定义验证器。

FormGroup Initiation.Added FormArray 动态推送新行

  this.loadFilesForm = this.formBuilder.group({
  addRemoveFormArray: this.formBuilder.array([
    this.formBuilder.group({
      searchType: new FormControl('any'),
      customFieldType: new FormControl(''),
      dynamicInputField: new FormControl(''),
      startDate: new FormControl(null, [Validators.required]),
      startTime: new FormControl(null,
        [Validators.pattern(/^((0?[1-9]|1[0-2]):[0-5][0-9] ?([APap][Mm]))$/), Validators.required]),
      endDate: new FormControl(null, [Validators.required]),
      endTime: new FormControl(null, [Validators.pattern(/^((0?[1-9]|1[0-2]):[0-5][0-9] ?([APap][Mm]))$/), Validators.required])
    })
  ])
});

在从下拉列表中选择日期输入时,我正在其中设置自定义验证功能

  onChangeSelect(rowIndex, item) {
    let loadFieldsTextArray = (<FormArray>this.loadFilesForm.get('addRemoveFormArray'));
   
    if (item === 'DATE') {
     loadFieldsTextArray.at(rowIndex).get('startTime').setValidators([this.startTimeValidator(rowIndex)])
    }
    /** Re-trigger validation for all fields */
    const loadFileTextArray = this.loadFilesForm.get('addRemoveFormArray') as FormArray;
    for (let control of loadFileTextArray.controls) {
      const grp = control as FormGroup;
      const val = (grp.controls.dynamicInputField as FormControl);
      val.updateValueAndValidity();
    }
  }

自定义验证器函数

  startTimeValidator(index): ValidatorFn {
    return (control: AbstractControl): { [key: string]: any } | null => {
      console.log('control value', control);
      let loadFieldsTextArray = (this.loadFilesForm.get('addRemoveFormArray') as FormArray);
      if (startTime && endTime && momentStartDate && momentEndDate) {
        if (moment(momentStartDate).isSame(momentEndDate) 
        && momentStartTime.isAfter(moemntEndTime)) {
          console.log('in if');
          return true ? null : { 'startError': { value: true } };
        } else {
          return false ? null : { 'startError': { value: false } };
        }
      }
    }
  }

在 HTML 中我显示这样的错误

<div *ngIf="loadFilesForm.get(['addRemoveFormArray',rowIdx]).get('startTime').hasError('startError')">
                 Time error
</div>

请让我知道我在做什么错,我也尝试在 html 中设置函数并在其中返回错误 true false 但这也不起作用。

0 个答案:

没有答案