How to disable a form control in Angular ?

Last Updated : 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 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

Angular PrimeNG Form Rating Disabled Component

taran910

Improve

Article Tags :

How to disable a form control in Angular ?

Similar Reads

Thank You!

What kind of Experience do you want to share?