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();