How to Disable an Input Field in a Reactive Form in Angular?

To disable an input field in a reactive form you just need to call the built-in method disable() on the input field that you want to disable.

For example, let’s say we have a form that has three input fields firstName, lastName, and age:

// Create the form
this.form = this.formBuilder.group({
  'firstName': ['', Validators.required],
  'lastName': ['', Validators.required],
  'age': ['', Validators.required]
});

Now, if you want to disable the firstName field, you can directly call the disable() method on it:

this.form.get('firstName').disable();
// Disable firstName field

In place of the get() method, you can also use the controls object to get the input field and then call the disable() method on it. This will also disable the specified form control:

this.form.controls['firstName'].disable();
// Disable firstName field

Disable the Whole Form

If you want to disable the whole form instead of a single input field, you have to call the disable() method on the form itself.

This will disable each and every form control of the form be it input, checkbox, or a radio button.

This is how you can do it:

this.form.disable();   
// Disable the form