In Angular how to add Validator to FormControl after control is created

Question

We have a component that has a dynamically built form  The code to add a control with validators might look like this   var c   new FormControl     Validators required     But let s say that I want to add 2nd Validator later  How can we accomplish this  We cannot find any documentation on this online  I did find though in the form controls there is setValidators  this form controls  firstName   setValidators    but it is not clear how to add a new or custom validator

User · Accepted Answer

You simply pass the FormControl an array of validators.

Here's an example showing how you can add validators to an existing FormControl:

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

Note, this will reset any existing validators you added when you created the FormControl.

User · Answer

I think the selected answer is not correct  as the original question is  how to add a new validator after create the formControl    As far as I know  that s not possible  The only thing you can do  is create the array of validators dynamicaly   But what we miss is to have a function addValidator   to not override the validators already added to the formControl  If anybody has an answer for that requirement  would be nice to be posted here

User · Answer

If you are using reactiveFormModule and have formGroup defined like this   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          than you are able to add a new validator  and keep old ones  to FormControl with this approach   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 returns a compose validator containing all previously defined validators

User · Answer

In addition to Eduard Void answer here s the addValidators method   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         Using it you can set validators dynamically   some form control addValidators   first validator  second validator     some form control addValidators   third validator

User · Answer

To add onto what  Delosdos has posted   Set a validator for a control in the FormGroup      this myForm controls  controlName   setValidators  Validators required    Remove the validator from the control in the FormGroup  this myForm controls  controlName   clearValidators    Update the FormGroup once you have run either of the above lines  this myForm controls  controlName   updateValueAndValidity    This is an amazing way to programmatically set your form validation

[angular] In Angular, how to add Validator to FormControl after control is created?

Examples related to angular

Examples related to forms

Examples related to angular-reactive-forms