Open In App

Disabling the Button when input field is empty in Angular

Last Updated : 28 Apr, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

A Disabled button is un-clickable and unusable. This is useful when suppose user has not entered a password then the submit button should be disabled. In this article, we will see the Disable button when input is empty in Angular. 

Steps for Installing & Configuring the Angular Application

Step 1: Create an Angular application using the following command.

ng new appname

Step 2: After creating your project folder i.e. appname, move to it using the following command.

cd appname

Project Structure

It will look like the following:

z132

Example 1: In this example, we will use a function that will check the length of the password. If it is equal to zero then make the button disabled otherwise, enable.

HTML 
<!-- app.component.html -->
<h2 style="color: green">GeeksforGeeks</h2>
<h2>
    Disable button when input is empty in Angular </h2>
<p>
  Will you vote for me for Geeks Premier League 2023 ?
</p> 
<input required [(ngModel)]="password" 
       (ngModelChange)="checkPasswordEmpty()">
<button [disabled]="invalid">Submit</button>
JavaScript 
// app.component.ts
import { DatePipe } from '@angular/common';
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: "./app.component.html",
})
export class AppComponent {
    password: string = ""
    invalid: boolean = true
    console = console
    checkPasswordEmpty() {
        console.log("hi")
        if (this.password.length == 0) {
            this.invalid = true
        }
        else {
            this.invalid = false
        }
    }
}
JavaScript 
// app.module.ts
import { NgModule } 
    from '@angular/core';
import { BrowserModule } 
    from '@angular/platform-browser';
import { HttpClientModule }
    from '@angular/common/http';
import { FormsModule } 
    from '@angular/forms'
import { AppComponent } 
    from './app.component';

@NgModule({
    declarations: [
        AppComponent,
    ],
    imports: [
        BrowserModule,
        HttpClientModule,
        FormsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

Output

Recording-2023-10-30-at-005039

Example 2: In this example, we will use form validators using the ngForm Directive.

HTML 
app.component.html
<h2 style="color: green">GeeksforGeeks</h2>
<h2>
  Disable button when input
  is empty in Angular
</h2>
<p>
  Will you vote for me for 
  Geeks Premier League 2023 ?
</p>  
<form #formCtrl="ngForm">
    <input required [(ngModel)]="password"
           name="password">
    <button [disabled]="!formCtrl.form.valid">
          Submit
      </button>
    {{console.log(formCtrl.form.valid)}}
</form>
JavaScript 
// app.component.ts
import { DatePipe } from '@angular/common';
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: "./app.component.html",
})
export class AppComponent {
    console = console
    password: string = ""
}
JavaScript 
// app.module.ts
import { NgModule } 
    from '@angular/core';
import { BrowserModule } 
    from '@angular/platform-browser';
import { HttpClientModule } 
    from '@angular/common/http';
import { FormsModule } 
    from '@angular/forms'
import { AppComponent } 
    from './app.component';

@NgModule({
    declarations: [
        AppComponent,
    ],
    imports: [
        BrowserModule,
        HttpClientModule,
        FormsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

Output:

Recording-2023-10-30-at-010125


N
nikitamehrotra99
Improve
Article Tags :

Explore

Lightbox