Dynamically Add/Remove Validators in Angular Reactive Forms

A simple guide to adding and removing dynamic validations in Angular reactive forms

If you’re developing an Angular application, you might face a situation where you have to add or remove some validators dynamically in form controls. For example, let’s suppose you have a County field in your reactive form and you want to make it required based on the country selected by the user. For this, you might think of adding and removing the Required validator from the County field based on the country selected.

Well, for this kind of scenario, Angular helps us a lot. We have some built-in functions in Angular which we can use to set validators conditionally — and thanks to reactive forms, which allows us to do so very, very easily.

So let’s just start from the beginning.

I’m expecting that you have a running Angular application with reactive forms. For me, I have a very simple form with two fields. One is for Country and the second one is for County, as mentioned in the beginning.

I have a template and corresponding component code as shown below.

Let’s discuss what we are doing here, step by step.

1. We just created a simple reactive Form with two fields, Country and County.
2. We have a drop-down for Country and whenever the drop-down value is changed, we are calling a function which is onCountryChange() to update the validator(s) for County.
3. Just to verify if the Required validator is set, we are checking if County field has required error or not.
4. We simply initialized the reactive form with default validation.
5. In onCountryChange() method, we are checking the value of the country selected. If this value is B (just in my case), we are setting the Required validator for County with the setValidators() method.
6. And if Country is not B, we are just clearing the validators.

Here’s how it will look in the browser :

And that’s it. It’s that simple to add or remove validators in Angular reactive forms.

Some Important Points to Remember

1. setValidators() method removes all the previous/default validators from form control. For example, let’s suppose during form initialization, you set maxLength and minLength validators for County. But once setValidators([Validators.required]) executes, it will remove maxLength and minLength from County and set the Required validator only.

So if you want to have maxLength and minLength as well, just do something like this :

setValidators([Validators.required, Validators.maxLength(10), Validators.minLength(5)])

2. Always use the updateValueAndValidity() method after updating (either add or remove) validators. Because all your changes related to control will be reflected only if you put this statement, i.e., updateValueAndValidity().

3. Unfortunately, Angular doesn’t provide a way to remove only a single validator from form control. It has a clearValidators() method, but that will remove all the validators.

For this, we can do two things. We can either use clearValidators() to remove all validators and then use setValidators() to set needed validation, or we can directly use setValidators() with the needed validators only (without the validator you don’t want to have).

This is it for this article. I hope this was helpful.

References

The final code is available on GitHub:

Thanks for reading!