Disable Angular FormControl
January 10, 2021
FormControl in Angular application. We can disable a FormControl by passing disabled attribute while instantiating it. We can use disable() and enable() method of FormControl. We can also call disable/enable function at runtime by using control[action]() method of FormControl. We need to pass action as 'disable' or 'enable'. We can also use [disabled]="true" binding to disable a form control.
Now let us discuss the examples to use all above approach to disable form controls step-by-step.
Contents
Technologies Used
Find the technologies being used in our example.1. Angular 11.0.3
2. Node.js 12.5.0
3. NPM 6.9.0
Passing disabled in FormControl
To disable a FormControl, we pass disabled attribute to it as following.
company = new FormControl({value:"", disabled: true});
disabled attribute with validations in FormControl.
company = new FormControl({value:"Krishna", disabled: true}, [Validators.required]);
Using disable() and enable() method of FormControl
A FormControl can be disabled and enabled using its disable() and enable() method respectively.
Find the component code.
cityName = new FormControl();
cityNameDisable() {
this.cityName.disable();
}
cityNameEnable() {
this.cityName.enable();
}
<input [formControl]="cityName"> <button (click)="cityNameDisable()">Disable</button> <button (click)="cityNameEnable()">Enable</button><br/>
Creating Directive to Enable/Disable Control
Find the directive to enable/disable control.enable-disable-directive.ts
import { NgControl } from '@angular/forms';
import { Directive, Input } from '@angular/core';
@Directive({
selector: '[enableDisable]'
})
export class EnableDisableDirective {
@Input() set enableDisable(action: string) {
this.ngControl.control[action]();
}
constructor(private ngControl: NgControl) {
}
}
disable() function.
ngControl.control['disable']()
enable() function.
ngControl.control['enable']()
<input [formControl]="countryName" [enableDisable]="cnAction"> <button (click)="cnAction = 'disable'">Disable</button> <button (click)="cnAction = 'enable'">Enable</button>
Using [disable] Binding
We can disable a control using [disabled]="true" binding.
<input [formControl]="company" [disabled]="true">
[attr.disabled]="true".
<input [formControl]="company" [attr.disabled]="true">
[disabled]="true" binding to disable a control. Using [disabled]="true" gives us a message in browser console as following.
It looks like you're using the disabled attribute with a reactive form directive. If you set disabled to true
when you set up this control in your component class, the disabled attribute will actually be set in the DOM for
you. We recommend using this approach to avoid 'changed after checked' errors.
Example:
form = new FormGroup({
first: new FormControl({value: 'Nancy', disabled: true}, Validators.required),
last: new FormControl('Drew', Validators.required)
});
Complete Example
Here we will provide complete code of our example. The code forEnableDisableDirective is given above in the article. Find the other files of our example.
reactive-form.component.ts
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, FormBuilder, Validators } from '@angular/forms';
@Component({
selector: 'app-reactive-form',
templateUrl: './reactive-form.component.html'
})
export class ReactiveFormComponent implements OnInit {
company = new FormControl({value:"", disabled: true});
cityName = new FormControl();
state = new FormControl();
countryName = new FormControl();
cityNameDisable() {
this.cityName.disable();
}
cityNameEnable() {
this.cityName.enable();
}
cnAction = "enable";
userForm: FormGroup;
ageAction = "enable";
constructor(private formBuilder: FormBuilder) {
}
ngOnInit() {
this.userForm = this.formBuilder.group({
name: [{value:"Mahesh", disabled: true}, [Validators.required]],
age: ''
});
}
onFormSubmit() {
console.log(this.userForm.value);
this.userForm.reset();
}
}
<input [formControl]="company"> <br/> <!--input [formControl]="company" [disabled]="true"--> <input [formControl]="state" [attr.disabled]="true"> <br/> <input [formControl]="cityName"> <button (click)="cityNameDisable()">Disable</button> <button (click)="cityNameEnable()">Enable</button><br/> <input [formControl]="countryName" [enableDisable]="cnAction"> <button (click)="cnAction = 'disable'">Disable</button> <button (click)="cnAction = 'enable'">Enable</button> <h3>User Form</h3> <form [formGroup]="userForm" (ngSubmit)="onFormSubmit()"> <table> <tr> <td>Name: </td> <td> <input formControlName="name"> </td> </tr> <tr> <td>age: </td> <td> <input formControlName="age" [enableDisable]="ageAction"> <button (click)="ageAction = 'disable'">Disable</button> <button (click)="ageAction = 'enable'">Enable</button> </td> </tr> <tr> <td colspan="2"> <button>Submit</button> </td> </tr> </table> </form>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<app-reactive-form></app-reactive-form>
`
})
export class AppComponent {
}
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
.error {
color: red;
}
.success {
color: green;
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { ReactiveFormComponent } from './reactive-form.component';
import { EnableDisableDirective } from './enable-disable-directive';
@NgModule({
imports: [
BrowserModule,
ReactiveFormsModule,
],
declarations: [
AppComponent,
ReactiveFormComponent,
EnableDisableDirective
],
providers: [
],
bootstrap: [
AppComponent
]
})
export class AppModule { }
Run Application
To run the application, find the steps.1. Download source code using download link given below on this page.
2. Use downloaded src in your Angular CLI application. To install Angular CLI, find the link.
3. Run ng serve using command prompt.
4. Access the URL http://localhost:4200
Find the print screen of the output.
