В Angular, как добавить валидатор в FormControl после создания элемента управления?

У нас есть компонент, который имеет динамически построенную форму. Код для добавления элемента управления с валидаторами может выглядеть так:

var c = new FormControl('', Validators.required);

Но допустим, что я хочу добавить второй валидатор позже . Как мы можем этого добиться? Мы не можем найти никакой документации по этому поводу в Интернете. Я нашел, хотя в элементах управления формы есть setValidators

this.form.controls["firstName"].setValidators 

но неясно, как добавить новый или настраиваемый валидатор.

Вы просто передаете FormControl массив валидаторов.

Вот пример, показывающий, как вы можете добавить валидаторы в существующий FormControl:

this.form.controls["firstName"].setValidators([Validators.minLength(1), Validators.maxLength(30)]);

Обратите внимание: это сбросит все существующие валидаторы, которые вы добавили при создании FormControl.

Чтобы добавить к тому, что опубликовал @Delosdos.

Установите валидатор для элемента управления в FormGroup: this.myForm.controls['controlName'].setValidators([Validators.required])

Удалите валидатор из элемента управления в FormGroup: this.myForm.controls['controlName'].clearValidators()

Обновите FormGroup после выполнения любой из приведенных выше строк. this.myForm.controls['controlName'].updateValueAndValidity()

Это отличный способ программно настроить проверку формы.

Если вы используете reactiveFormModule и определите formGroup следующим образом:

public exampleForm = new FormGroup({
        name: new FormControl('Test name', [Validators.required, Validators.minLength(3)]),
        email: new FormControl('test@example.com', [Validators.required, Validators.maxLength(50)]),
        age: new FormControl(45, [Validators.min(18), Validators.max(65)])
});

чем вы можете добавить новый валидатор ( и сохранить старые ) в FormControl с помощью этого подхода:

this.exampleForm.get('age').setValidators([
        Validators.pattern('^[0-9]*$'),
        this.exampleForm.get('age').validator
]);
this.exampleForm.get('email').setValidators([
        Validators.email,
        this.exampleForm.get('email').validator
]);

FormControl.validator возвращает валидатор компоновки, содержащий все ранее определенные валидаторы.

Я думаю, что выбранный ответ неверен, поскольку исходный вопрос - «как добавить новый валидатор после создания formControl».

Насколько я знаю, это невозможно. Единственное, что вы можете сделать, - это динамически создать массив валидаторов.

Но чего нам не хватает, так это наличия функции addValidator (), которая не переопределяет валидаторы, уже добавленные в formControl. Если у кого-то есть ответ на это требование, было бы неплохо разместить его здесь.

В дополнение к ответу Eduard Void вот addValidatorsметод:

declare module '@angular/forms' {
  interface FormControl {
    addValidators(validators: ValidatorFn[]): void;
  }
}

FormControl.prototype.addValidators = function(this: FormControl, validators: ValidatorFn[]) {
  if (!validators || !validators.length) {
    return;
  }

  this.clearValidators();
  this.setValidators( this.validator ? [ this.validator, ...validators ] : validators );
};

С его помощью вы можете динамически устанавливать валидаторы:

some_form_control.addValidators([ first_validator, second_validator ]);
some_form_control.addValidators([ third_validator ]);