Angular — Add or remove validations dynamically to a formControl/formGroup

FormControl:

In Angular, you can dynamically add or remove validations to a FormControl by using the setValidators() method. This method allows you to set or change the validators for a control at runtime.

To add or remove a validation dynamically, follow these steps:

Import the necessary classes from @angular/forms in your component file:

import { FormControl, Validators } from '@angular/forms';

Create a FormControl instance and initialize it with the desired initial validators:

myFormControl: FormControl = new FormControl('', [Validators.required]);

In the example above, we are setting the initial validator as required, but you can use any other built-in validators or custom validators as per your requirements.

To dynamically add or remove validators, you can use the setValidators() method of the FormControl. This method accepts an array of validators as an argument.

For example, to add a new validator dynamically, you can call setValidators() and pass the existing validators along with the new validator(s):

this.myFormControl.setValidators([
  Validators.required,
  Validators.minLength(5)
]);

In the above example, we added a new validator minLength(5) to the existing validators.

To remove a validator dynamically, you need to create a new array of validators without the one you want to remove. Then, call setValidators() with the new array:

this.myFormControl.setValidators([
  Validators.required
]);

In the example above, we removed the minLength validator from the FormControl.

Finally, you need to call the updateValueAndValidity() method on the FormControl to trigger the validation update:

this.myFormControl.updateValueAndValidity();

This will update the validation state of the control and apply the dynamically added or removed validators.

By following these steps, you can add or remove validations dynamically to a FormControl in Angular. Remember to import the necessary classes and ensure you have the required form modules imported in your application.

FormGroup:

In Angular, you can dynamically add or remove validations to a FormGroup by using the setValidators() method provided by the AbstractControl class. This method allows you to update the validators for a specific control within the form group.

To add or remove validations dynamically, you need to follow these steps:

Import the necessary classes and functions:

import { FormGroup, FormBuilder, Validators, AbstractControl } from '@angular/forms';

Create a FormGroup using the FormBuilder:

formGroup: FormGroup;
constructor(private formBuilder: FormBuilder) {
  this.formGroup = this.formBuilder.group({
    // Define your form controls here
    controlName: ['', Validators.required]
  });
}

Access the control for which you want to add or remove validations:

get controlName(): AbstractControl {
  return this.formGroup.get('controlName');
}

Dynamically add or remove validations using the setValidators() method:

To add a validation dynamically, call the setValidators() method and provide the desired validator function or an array of validators:

this.controlName.setValidators([Validators.required, Validators.minLength(5)]);

To remove a validation, call setValidators(null) or setValidators([]) to clear all validators:

this.controlName.setValidators(null);

Trigger the validation update by calling the updateValueAndValidity() method:

this.controlName.updateValueAndValidity();

Here’s an example of adding and removing a required validator dynamically:

import { Component } from '@angular/core';
import { FormGroup, FormBuilder, Validators, AbstractControl } from '@angular/forms';

@Component({
  selector: 'app-example',
  template: `
    <form [formGroup]="formGroup">
      <input type="text" formControlName="controlName">
      <button (click)="addValidation()">Add Validation</button>
      <button (click)="removeValidation()">Remove Validation</button>
    </form>
  `,
})
export class ExampleComponent {
  formGroup: FormGroup;

  constructor(private formBuilder: FormBuilder) {
    this.formGroup = this.formBuilder.group({
      controlName: ['', Validators.required]
    });
  }

  get controlName(): AbstractControl {
    return this.formGroup.get('controlName');
  }

  addValidation() {
    this.controlName.setValidators([Validators.required, Validators.minLength(5)]);
    this.controlName.updateValueAndValidity();
  }

  removeValidation() {
    this.controlName.setValidators(null);
    this.controlName.updateValueAndValidity();
  }
}

In this example, there is a form with an input field and two buttons. Clicking the “Add Validation” button adds the required and minLength validators to the control, while clicking the “Remove Validation” button removes all validators from the control.