Использование пользовательских валидаторов в угловой реактивной форме

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})

ИЛИ

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

Ваш пользовательский валидатор такжене должен возвращать функцию.Должно быть возвращено имя: пара логический ключ-значение.Например, 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
}