How to Disable a Reactive Form in Angular?

To disable a reactive form in Angular you can directly call the form.disable() method on it. The disable() method will make all of the form controls of the current form disabled whenever called on it.

This is how you can do it in just a single line:

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

If you want to make the form enabled, you can call the form.enable() method. This is just the opposite of the disable() method.

this.form.enable();
// Enable the form

Check if the Form is Disabled or Enabled

When we make the form disabled or enabled, we often need to check whether the form is currently disabled or enabled.

To check whether the form is currently disabled or enabled, we can use the form.disabled property. The disabled property returns true if the form is currently disabled, otherwise, it returns false.

this.form.disabled;
// Returns true if disabled
// otherwise false

Make a Specific Form Control Disabled

In some situations, you might need to make only a specific form field disabled.

To do that you can call the disable() method on that specific form control.

This is how you can do it:

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

// OR

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