Question

我正在尝试使用自定义验证器比较结束时间是否大于开始时间。

代码：

function timeValidator(): ValidatorFn {
  return (control: AbstractControl): { [key: string]: boolean } | null => {
      if (control.value !== undefined && (isNaN(control.value) || control.get('fromTime').value > control.get('toTime').value)) {
          return { 'ageRange': true };
      }
      return null;
  };
}

来自表单组

toTime: new FormControl(null, [Validators.required, timeValidator(this.fromTime,this.toTime)]),

在Cannot read property 'value' of null行上运行if (control.value !== undefined && (isNaN(control.value) || control.get('fromTime').value > control.get('toTime').value))后，我得到了一个错误

我需要一些帮助来解决此问题。谢谢

Answer 1

您的自定义验证程序应该放在FormGroup级别而不是FormControl级别。另外，您应该将函数作为参数传递，这意味着不带（）括号，因为timeValidator是回调函数。（）告诉js引擎执行该功能。但是您想要的是将函数作为参数传递，因此可以稍后执行。

两个

constructor(private fb: FormBuilder){}
...
this.form = this.fb.group({
    fromTime: [''],
    toTime: ['']
}, { validator: timeValidator})

OR

 form = new FormGroup({
     toTime: new FormControl(null),
     fromTime: new FormControl(null),
 }, { validator: timeValidator})

您的自定义验证器也不应返回函数。它应该返回一个name：boolean键值对。例如。 isEndGTStart：true或null，如果为false

例如

export function timeValidator(fg: FormGroup){
    const fromTime = fg.get("fromTime").value;
    const toTime = fg.get("toTime).value;

    return toTime > fromTime ? { isEndGTStart: true } : null
}

以角度反应形式使用自定义验证器

1 个答案: