Disable Submit Button if the Input Field is Empty in Angular

To disable the submit button if the input field is empty in Angular,

  • Bind a function to the (input) event of the input element eg. <input (input)="test()">
  • Pass the $event object to the bounded function as an argument.
  • Get the text value of the input using $event.target.value property.
  • Bind the disabled attribute of the button with a boolean flag eg. [disabled]="isDisabled"
  • Set the value of the boolean flag to true if the input’s text value is an empty string('').
  • If not, set it to false.

Let’s put all these steps together and write the code:

<div class="container">
  <form>
    <div>
      <input type="text" (input)="onUserInput($event)" id="name" placeholder="Type here">
      <label for="name"> Your Name</label>
    </div>

    <!-- Add other elements -->

    <div>
      <button type="submit" [disabled]="isDisabled" (click)="submit()">Submit</button>
    </div>
  </form>
</div>

Add the logic to your ts file:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  // Keep the button disabled initially
  isDisabled: boolean = true;
  
  onUserInput(event:any){

    // Get the input text
    let inputText = event.target.value;

    if(inputText==''){
      this.isDisabled = true;  // Make button disabled
    }
    else{
      this.isDisabled = false; // Make button enabled
    }
  }

  submit(){
    // Add your stuff
    alert('Thank you!!');
  }
  
}

Output:

Disable submit button if the input field is empty in Angular

In this example, we have used the disabled attribute to make the button disabled or enabled conditionally.

When you set the button’s disabled attribute to a boolean value of true, all sort of mouse events becomes inactive for the button.

And if you set it to false, the button becomes enabled.


2. Disable Submit Button if the Input Field is Empty in a Reactive Form

If you are using Angular’s reactive forms, then you don’t have to explicitly check if the input is empty or not and then set the disabled property.

Instead, you can directly bind the disabled property of the button with the form.invalid property.

The form.invalid property returns true if the user hasn’t filled all the mandatory form fields or hasn’t specified the expected value.

And returns false, only if all the form fields are valid i.e. the form is valid:

<div class="container">
  <form [formGroup]="userForm" (ngSubmit)="submit()">
    <div>
      <input type="text" formControlName="firstName" placeholder="Type here">
      <label> First Name</label>
    </div>

    <div>
      <input type="text" formControlName="lastName" placeholder="Type here">
      <label> Last Name</label>
    </div>

    <!-- Add other elements -->

    <div>
      <button type="submit" [disabled]="userForm.invalid">Submit</button>
    </div>
  </form>
</div>

Add the form group to the ts file:

import { Component, OnInit } 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 implements OnInit {

  userForm: FormGroup;

  constructor(private fb: FormBuilder){

    this.userForm = this.fb.group({
      firstName: ['', Validators.required],
      lastName: ['', Validators.required],
      
    });

  }

  ngOnInit(): void {
  }

  submit(){
    // Add your stuff
    alert('Thank you!!');
  }
  
}

Output:

Disable submit button if the input field is empty in a Reactive form in Angular

As you can see from the above output, the submit button remains disabled until all the mandatory fields are filled.

As soon as the mandatory fields are filled, the button becomes enabled. That’s because it is bind with the form.invalid property.

That’s all for this article. Thanks for reading!

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.