To disable a button in Angular, you can set its disabled property to a boolean value true and if the button is already disabled and you want to enable it back, you can set the disabled property to a boolean value false.
If you want to make the button disabled or enabled dynamically based on a condition, you can bind the [disabled] property with some flag.
The button will become disabled if the value of the flag evaluates to true, and it will remain enabled if the value of the flag evaluates to false.
For example,
<div class="container"> <h2>Enable or Disable a Button dynamically</h2> <button (click)="enableDisable()">Enable/Disable</button> <button [disabled]="isDisabled">Make this button enabled or disabled</button> </div>
Add the code into the ts file:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
// Keep the button enabled by default
isDisabled: boolean = false;
// Fires on button click
enableDisable() {
// Enable or disable button conditionally
if (this.isDisabled == true) {
this.isDisabled = false; // Make button enabled
}
else {
this.isDisabled = true; // Make button disabled
}
}
}
Output:
As you can see from the above output, the button becomes disabled as soon as we change the value of the isDisabled flag from false to true.
And, if we set the value of the isDisabled flag to false, the button again becomes enabled.
This way you can make the button disabled or enabled based on some condition.
Disable the Button if the Input is Empty
Let’s take a real-world example, where we will keep the submit button disabled until the input field is empty.
As soon as the user types something into the input, we will instantly make the button enabled.
<div class="container">
<h2>Make Button disabled if input is empty</h2>
<form>
<input type="text" placeholder="Type something" (input)="onInput($event)">
<button type="submit" [disabled]="isDisabled">Submit</button>
</form>
</div>
Inside the ts file, check if the input is empty using event.target.value property.
If the input is empty, set the isDisabled flag to true and if it’s not, set the isDisabled flag to false.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
// Keep the button disabled by default
isDisabled: boolean = true;
onInput(event: any){
// Get the input's value
let text = event.target.value;
// Keep the button disabled if input is empty
if(text==''){
this.isDisabled = true;
}
else{
this.isDisabled = false;
}
}
}
Output:
Make Button Disabled if Reactive Form is Invalid
When we develop real-world applications, we keep the submit button disabled until the user fills all the mandatory fields so that the correct data is stored in the database.
With reactive forms, we can very easily check if the form is valid or invalid using the form.invalid property.
The form.invalid property returns true if the reactive form is invalid, otherwise, it returns false.
We can bind the form.invalid property with the disabled property of the button so that it gets enabled only if the form is valid.
<div class="container">
<h2>Make Button disabled if form is invalid</h2>
<form [formGroup]="userForm" (ngSubmit)="submit()">
<div>
<input type="text" placeholder="Type here" formControlName="firstName">
<label> First Name</label>
</div>
<div>
<input type="text" placeholder="Type here" formControlName="lastName">
<label> Last Name</label>
</div>
<div>
<input type="email" placeholder="Type here" formControlName="email">
<label> Email</label>
</div>
<button type="submit" [disabled]="userForm.invalid">Submit</button>
</form>
</div>
Add the code into the ts file:
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
userForm: FormGroup;
constructor(private fb: FormBuilder){
this.userForm = this.fb.group({
firstName: ['', Validators.required],
lastName: ['', Validators.required],
email: ['', Validators.required]
});
}
submit(){
// Get the form value
let formValue = this.userForm.value;
alert('Form Submitted Successfully.');
}
}
Output:
That’s all for this article. Thanks for reading!
