How to add Validators Dynamically using SetValidators in Angular

We can add Validators dynamically using the SetValidators or SetAsyncValidators. This method is available to FormControl, FormGroup & FormArray.

There are many use cases where it is required to add/remove validators dynamically to a FormControl or FormGroup. Usually when you have a Form Field, whose value depends on another Form Field.

Adding the Validators Using the SetValidators

Syntax

The setValidators programmatically adds the sync validators. This method will remove all the previously added sync or async validators.

setValidators(newValidator: ValidatorFn | ValidatorFn[]): void

Examples:

setAsyncValidators

The setAsyncValidators programmatically add the Async validators.

setValidators overwrites all existing Validators. Hence it is very important to include all the validators that we want in the setValidators method

Removing Validators Using clearValidators

There is no option that exists, which can remove an individual validator. Use clearValidators to remove all the validators of a control.

Update Validation Status

Removing or adding the validators does not change the validity status of the form or the control immediately. The Validators run only when we change the value of the field.

We can force angular to run the validations using the updateValueAndValidity method.

SetValidators Example

The following example, shows how to use the SetValidators in Angular

We have two fields email & mobile.

The user needs to choose, how he wants the system to notify him, using the drop-down field notifyVia. The drop-down has two options email & Mobile.

If the user chooses email, then we need to make the email field as a Required field. If he chooses the Mobile, then we must make the mobile field as Required field.

We subscribe to the valueChanges event of the notifyVia to listen for changes and invoke the changeValidators method.

In the changeValidators method, we check the value of notifyVia and add or remove the required validator using the setValidators. We also add the email validator (for email field) or MinLength validator (for mobile field). To remove the validator, we use the method clearValidators()

Finally, we use the updateValueAndValidity method, which forces the angular to update the validity status of the control.

The component template

References

  1. SetValidators
  2. SetAsyncValidators
  3. ClearValidators
  4. UpdateValueAndValidity

7 thoughts on “How to add Validators Dynamically using SetValidators in Angular”

  1. Cool run-down.
    updateValueAndValidity() Saved my day on a conditional validator that kept throwing me NG0100: Expression has changed after it was checked...

    1. So, thanks for that!
      An idea I had because I worried this would overload my form validation:
      If you have a complex form and like to understand how this interferes with the validation process, introduce a custom null validator on fields you worry about and put a log-line in it the validator. The validator should always return null and will therefore not affect the validation, but every time validation is triggered it will fire a log.

  2. After using ‘setValidators’ the field start with ‘ng-valid’ even it’s not. only after modify it’s reset. How to use validate and stay without ng-valid or invalid at start ?

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top