Open In App

How to disable a form control in Angular ?

Last Updated : 23 Jul, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

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://v17.angular.io/api/forms/AbstractControlDirective#disabled


T
taran910
Improve
Article Tags :
Lightbox