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

89

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

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

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

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

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

скромный
источник

Ответы:

118

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

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

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

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

Энди-Делосдос
источник
5
ха ... иногда смотришь на что-то так долго, что лучше просто отойти. БЛАГОДАРЮ ВАС!!
melegant 06
1
Есть ли способ удалить валидацию?
Abhijith ss
7
любой способ сделать это, не отменяя старые? или как-нибудь добавить новые?
danday74
1
@ danday74, посмотрите ответ Эдуарда Войда внизу этого вопроса. Должен быть принят ответ имо. Он объясняет, как делать то, что вам нужно знать, что мне также нужно было знать, как это делать.
Крис
8
Мне также пришлось вызвать .updateValueAndValidity()элемент управления формы после установки новых валидаторов.
Keeleon
91

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

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

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

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

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

Шаммельбург
источник
2
Для меня это работало без последней строки, я уверен, что новые версии Angular теперь сами обновляют валидность формы. Но спасибо, что рассказали нам о updateValueAndValidityметоде, который однажды может пригодиться!
Нино Филиу
@NinoFiliu updateValueAndValidityпо-прежнему используется для проверки и не обрабатывается иначе в новых версиях Angular. Что происходит, это setValidatorsобновляет валидаторы, но не выполняет проверку, а затем вы используете ее updateValueAndValidityдля выполнения проверки. Вы должны настраивать валидаторы в точке, где обнаружение изменений обрабатывает их за вас, но вы найдете использование updateValueAndValidityв группе или элементе управления в зависимости от того, какой валидатор вы только что установили критически важным - github.com/angular/angular/issues/19622#issuecomment- 341547884 .
mtpultz
4
Я использую Angular 6 и не могу заставить его работать без updateValueAndValidity. Спасибо @shammelburg!
Оли Крт
1
На Angular 7 он также не работал бы у меня без последней строки обновления.
Дэвид Финдли
Да. Он работает без него updateValueAndValidity(), но в некоторых случаях это не так. если вы добавили updateValueAndValidity()после, setValidators()это сразу повлияет на изменения, связанные с управлением . Так что лучше добавить updateValueAndValidity () `.
Jamith NImantha
78

Если вы используете 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 возвращает валидатор компоновки, содержащий все ранее определенные валидаторы.

Эдуард Войд
источник
13
Имо, это должен быть принятый ответ. Он демонстрирует, как добавлять валидаторы, такие как запрошенные OP, но также показывает, как сохранить ранее установленные валидаторы; Это было первое, что я искал в Google, как сделать после того, как прочитал принятый ответ, потому что я не хотел перезаписывать некоторые валидаторы, которые у меня уже были, но мне все же нужно было программно добавлять дополнительные. Спасибо за этот ответ @Eduard Void
Крис
3
Я согласен с моим предшественником. Вопрос был в том, как добавить новый валидатор в форму управления, а не в том, как его заменить .
Plusce 05
6
Я сделал это, control.setValidators(control.validator ? [ control.validator, Validators.email ] : Validators.email);чтобы обойти строгие нулевые проверки
Уильям Лохан
3

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

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

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

user2992476
источник
1
Думаешь control.setValidators(control.validator ? [ control.validator, Validators.email ] : Validators.email);, сработает.
Уильям Лохан
2
См. Ответ @Eduard Void stackoverflow.com/a/53276815/6656422
Уильям Лохан
3

В дополнение к ответу 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 ]);
Люцифер63
источник