How to Dynamically Add or Remove Validators in Angular

In this post, you will learn how to change validation rules at runtime in Angular applications. This is especially useful in projects with large and complex forms that change based on user interaction.

Photo by Shane Aldendorff: https://www.pexels.com/photo/shallow-focus-photography-of-magnifying-glass-with-black-frame-924676/

In Angular applications, when using reactive forms, we usually define the validators assigned to each control on form creation.

this.blogPostForm = new FormGroup({
    title: new FormControl<string>('', [Validators.required]),
    content: new FormControl<string>('', [Validators.maxLength(500)]),
});

This is usually a good approach if the form is static and you know all the fields and validation rules upfront. But what happens if you don’t? Well, I’m happy to let you know that Angular has you covered. Let’s explore some methods that allow us to add/remove validation rules programmatically.

The setValidators() method

To assign an array of validators to a specific control, you can use the setValidators() method, which takes an array of validators as parameters. Let’s assume we want to register a required validator and a maxLength validator for the “title” control. We can accomplish this task with the following code.

this.blogPostForm.controls.title.setValidators([
    Validators.required,
    Validators.maxLength(100),
]);

// Apply changes
this.blogPostForm.controls.title.updateValueAndValidity();

Please observe that we are also calling the updateValueAndValidity() method on the form control for the changes to take effect. This forces a recalculation of the field value and its validation state. If you omit this method, the changes won’t be reflected in your applications. Also, note that using setValidators() will overwrite existing validators on the control.

The addValidators() method

Let’s assume we start with the following form control and want to add a maxLength validator to the “title” field while keeping the required validator.

this.blogPostForm = new FormGroup({
    title: new FormControl<string>('', [Validators.required]),
    content: new FormControl<string>('', [Validators.maxLength(500)]),
});

If you need to append validators to control, while also keeping the ones that were already defined, use the addValidators() method, which also accepts a list of validators.

``typescript this.blogPostForm.controls.title.addValidators([ Validators.maxLength(100) ]);

// Apply changes this.blogPostForm.controls.title.updateValueAndValidity(); ``

You now know 2 methods for adding validators programmatically. But what if you want to remove validation rules? That is where the removeValidators() and clearValidators() methods come into play.

The removeValidators() method

If you need to remove some specific validators from a form group, you can call the removeValidators() method and provide an array of the validators you wish to remove from a control. The code below removes the required validator for the “title” field.

this.blogPostForm.controls.title.removeValidators([Validators.required]);

// Apply changes
this.blogPostForm.controls.title.updateValueAndValidity();

Again, we call updateValueAndValidity() to apply the changes and force the control to re-evaluate its value and validity.

The clearValidators() method

And if you want to remove all the validators from a control, you can use the clearValidators() method.

this.blogPostForm.controls.title.clearValidators();

// Apply changes
this.blogPostForm.controls.title.updateValueAndValidity();

Sync and async validators

All the examples that I showed in this post use synchronous validators. In most cases, these are the validators that you will use because they return the validation result directly. Async validators, on the other hand, return a promise or Observable. You can learn more about async validators here.