How to Disable an Input Field in Angular?

To disable an input field in Angular you can add the disabled property to the input field and bind it with a flag(eg. isDisabled).

If the value of the flag is true, the input will become disabled otherwise it will remain enabled. In real scenarios, you can dynamically change the value of the flag in your ts file.

<!-- Bind a flag with the disabled property -->
<input type="text" [disabled]="isDisabled" placeholder="Enter your name">

Inside your ts file, declare the variable isDisabled and set its value to true if you want to keep the input disabled by default. Otherwise, set it to false:

// Keep the input disabled by default
isDisabled: boolean = true;

Disable a Reactive Form Input field

If you are using a reactive form then you don’t need to bind the disabled property with a flag to disable the input field.

Rather, you can directly call the built-in method disable() on any form field inside your ts file and make it disabled anytime you want.

The following example will disable an input having formControlName=”firstName”:

this.form.get('firstName').disable();

// OR

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