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
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