Передача параметров, полученных из вызова api, в пользовательский валидатор в FormBuilder

Question

В компоненте я использую formBuilder для Angular Reactive Forms

Я получаю пример кода из этого сообщения

min = 10;
max = 20;
ngOnInit() {
    this.loginForm = new FormGroup({
        email: new FormControl(null, [Validators.required]),
        password: new FormControl(null, [Validators.required, Validators.maxLength(8)]),
        age: new FormControl(null, [ageRangeValidator(this.min, this.max)])
    });
}

Определена настраиваемая проверка в функции ageRangeValidator

function ageRangeValidator(min: number, max: number): ValidatorFn {
    return (control: AbstractControl): { [key: string]: boolean } | null => {
        if (control.value !== undefined && (isNaN(control.value) || control.value < min || control.value > max)) {
            return { 'ageRange': true };
        }
        return null;
    };
}

В случае, если min и max получены из вызова API. Как передать их в функцию пользовательского валидатора?

Answer 1

Я предпочитаю ответ Chellappan, но если вы собираетесь изменить значение max и min в процессе работы приложения angular, другой способ состоит в том, чтобы валидатор функции принадлежал компоненту и привязался к этому

//this function IN the component
ageRangeValidator(): ValidatorFn {
    return (control: AbstractControl): { [key: string]: boolean } | null => {
      if (control.value !== undefined && (isNaN(control.value) ||
          control.value < this.min ||control.value > this.max)
      ) {
        return { ageRange: true };
      }
      return null;
    };
  }

  //and when create the component
  age: new FormControl(15, [this.ageRangeValidator().bind(this)]) //<--see the bind(this)

Answer 2

FormControl API предоставляет метод setValidators . Что вы можете использовать для динамической установки валидатора. Внутри системы обратного вызова подписки вы можете вызвать setValidators примерно так:

Попробуйте следующее:

 ..subscribe((result)=>{
    this.age.setValidators([ageRangeValidator(result.min,result.max)]);
    this.loginForm.get('age').updateValueAndValidity();    
  })

Пример