How to disable a form control in Angular ?

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 module
import { 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 module
import { 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 module
import { 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