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' ;
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' ;
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' ;
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" >
< button disabled>Disabled Button</ button >
</ form >
|
Output:
Reference: https://angular.io/api/forms/AbstractControlDirective#disabled
Last Updated :
24 May, 2021
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...