Open In App

How to disable a form control in Angular ?

Improve
Improve
Like Article
Like
Save
Share
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://angular.io/api/forms/AbstractControlDirective#disabled



Last Updated : 24 May, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads