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

Question

Мне нужна небольшая помощь, чтобы узнать, как использовать одну и ту же пользовательскую функцию валидатора, умноженную на несколько раз для разных formControl в одном конструкторе, эта функция использует formControl в качестве параметров, чтобы узнать, если time1> time2, и у меня есть 3 разных времени formControls, но я Не знаю, как использовать одну и ту же функцию для проверки всех formControls, это мой валидатор пользовательских функций:

/ custom validator to check if time 1 is after time 2
export function timeIsAfter(time1Control: string, time2Control: string) {
  
    return (formGroup: FormGroup) => {
        const time1 = formGroup.controls[time1Control];
        const time2 = formGroup.controls[time2Control];

        if (time2.errors && !time2.errors.timeIsAfter) {
            // return if another validator has already found an error on the matchingControl
            return;
        }

        // set error on matchingControl if validation fails
        if (time1.value > time2.value) {
            time1.setErrors({ timeIsAfter: true });
        } else {
            time1.setErrors(null);
        }
    }
}

это мой конструктор форм:

formConstructor() {
  this.frequencyForm = this.formBuilder.group({
    time_1: new FormControl(null),
    time_2: new FormControl(null),
    time_3: new FormControl(null),
    time_4: new FormControl(null),

   
  }, {
    validator: timeIsAfter('time_1', 'time_2'), // <--- this works 
    validator_2: timeIsAfter('time_3', 'time_4'), // <--- this doesnt work
  });
}

Я пытался добавить с Validators.compose, но не работает, также используя Validators.call, и я получаю сообщение об ошибке

любая помощь приветствуется

Answer 1

Вместо объекта установите Массив валидаторов следующим образом. Также установите тип возвращаемой функции на ValidatorFn

formConstructor() {
    this.frequencyForm = this.formBuilder.group({
      time_1: new FormControl(null),
      time_2: new FormControl(null),
      time_3: new FormControl(null),
      time_4: new FormControl(null),
    });
    this.frequencyForm.setValidators([timeIsAfter('time_1', 'time_2'), timeIsAfter('time_3', 'time_4')])
  }

export function timeIsAfter(time1Control: string, time2Control: string) {

    return (formGroup: FormGroup): ValidatorFn => { ... }

}