How to disable a form control in Angular ?

24 May, 2021
In this article, we are going to see how to disable a form control in Angular 10. We will use AbstractControl disabled property to disable a form control element.
Syntax:
<formelement disabled></formelement>
Return Value:
boolean: returns boolean stating whether the element is disabled or not.
Approach: 
Create the Angular app to be used
In app.component.html make a form using ngForm directive.
Now disable the form control element using AbstractControl disabled property
Serve the angular app using ng serve to see the output.
Example 1: In this example, we have disabled the input element using this property.
app.module.ts
import { NgModule } from '@angular/core';  // Importing forms moduleimport { FormsModule } from '@angular/forms';import { BrowserModule } from '@angular/platform-browser';import { BrowserAnimationsModule } from '@angular/platform-browser/animations';      import { AppComponent }   from './app.component';   @NgModule({  bootstrap: [    AppComponent  ],  declarations: [    AppComponent  ],  imports: [    FormsModule,    BrowserModule,    BrowserAnimationsModule,        ]})export class AppModule { }
app.component.html
<br><form #gfg = "ngForm">    Name: <input type="text" name = 'name' ngModel disabled></form>
Output:
Example 2: In this example, we have disabled the checkbox element using this property.
app.module.ts
import { NgModule } from '@angular/core';  // Importing forms moduleimport { FormsModule } from '@angular/forms';import { BrowserModule } from '@angular/platform-browser';import { BrowserAnimationsModule } from '@angular/platform-browser/animations';      import { AppComponent }   from './app.component';   @NgModule({  bootstrap: [    AppComponent  ],  declarations: [    AppComponent  ],  imports: [    FormsModule,    BrowserModule,    BrowserAnimationsModule,        ]})export class AppModule { }
app.component.html
<br><form #gfg = "ngForm">    Checked: <input type="checkbox" name = 'Check' ngModel disabled></form>
Output:
Example 3: In this example, we have disabled the button element using this property.
app.module.ts
import { NgModule } from '@angular/core';  // Importing forms moduleimport { FormsModule } from '@angular/forms';import { BrowserModule } from '@angular/platform-browser';import { BrowserAnimationsModule } from '@angular/platform-browser/animations';      import { AppComponent }   from './app.component';   @NgModule({  bootstrap: [    AppComponent  ],  declarations: [    AppComponent  ],  imports: [    FormsModule,    BrowserModule,    BrowserAnimationsModule,        ]})export class AppModule { }
app.component.html
app.component.html
<br><form #gfg = "ngForm">    <button disabled>Disabled Button</button></form>
Output:
Reference: https://angular.io/api/forms/AbstractControlDirective#disabled
Angular10
AngularJS-Basics
AngularJS-Questions
AngularJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Routing in Angular 9/10
Angular PrimeNG Dropdown Component
Angular 10 (blur) Event
How to make a Bootstrap Modal Popup in Angular 9/8 ?
How to create module with Routing in Angular 9 ?
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?