Angular 11 Update Form Control Validation Dynamically like Required from Reactive Form Controls

In this Angular tutorial, we’ll learn how to set and reset the required validation on Angular form controls using the Reactive approach.

In Angular application, sometimes we may have large and complex forms to handle the user inputs. These form controls can be generated dynamically based on what we get from the server-side.

But after getting and generating these dynamic controls using Angular’s Reactive form approach, we may also need to control the validation on some controls whose behavior may open on other factors. Like if a user selects Married then it needs to put the Spouse name fields by setting it to true.

Let’s create a quick example that will demonstrate how to control Validation on Angular form controls.

Add a Simple Reactive Form

In the app.component.html file, add below extremely simple form.

<form [formGroup]="profileForm" (ngSubmit)="onSubmit()">

    <label>
      First Name:
      <input type="text" formControlName="firstName">
    </label>

    <label>
      Last Name:
      <input type="text" formControlName="lastName">
    </label>

    <button type="submit">Submit</button>

  </form>

  <button (click)="setRequired()">Make Required</button>
  <button (click)="unsetRequired()">Make Not Required</button>

There are two form input controls to take First Name and Last Name. Other than this we have three buttons. The first one is the Submit button and the other two are just to Set and Un-set the required property on these form controls.

Update Component Class

In component class, first, create a simple dynamic form using FormBuilder as shown below:

profileForm = this.fb.group({
    firstName: [''],
    lastName: ['']
  });

Then we will define the onSubmit() method to display current state or form on click if it is Valid or Invalid to return true or false.

onSubmit() {
    alert("IS FORM VALID? " + this.profileForm.valid);
  }

Now we’ll add the magic methods setRequired() and unsetRequired() to set the Validation on these form controls:

setRequired() {
    this.profileForm.controls.firstName.setValidators([Validators.required]);
    this.profileForm.controls.lastName.setValidators([Validators.required]);
    this.profileForm.controls.firstName.updateValueAndValidity();
    this.profileForm.controls.lastName.updateValueAndValidity();
  }

  unsetRequired() {
    this.profileForm.controls.firstName.setValidators(null);
    this.profileForm.controls.lastName.setValidators(null);
    this.profileForm.controls.firstName.updateValueAndValidity();
    this.profileForm.controls.lastName.updateValueAndValidity();
  }

To change/ update a form control’s validation status dynamically we call the setValidators() method which can take multiple validators as an array.

Make sure to call the updateValueAndValidity() after that to update the form object.

To show it a little quicker we have directly used the control name, but in a real application, you can create a generic service method that will take Validators and control name to update its validation dynamically.

Hope this quick method will be helpful.. Thanks