How Do I disable the button if the input box is empty and enable when field is filled

user_8641129 0
Viewed 68131

I want the button disabled if the user has not filled the input fields. I added a condition (name.value.length === 0 || email.value.length === 0) This disables the button on load but when values are input in the text fields the disabled is not removed.

Here is my code:

 <section class="container col-md-12 col-md-offset-3">
      <h1>Add Users</h1>
      <form class="form-inline">
        <div class="form-group">
          <label for="exampleInputName2">Name</label>
          <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe" #name>
        </div>
        <div class="form-group">
          <label for="exampleInputEmail2">Email</label>
          <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com" #email>
        </div>
        <button type="submit" [disabled]="(name.value.length === 0 || email.value.length === 0)" class="btn btn-default" (click)="getValues($event, name, email)">Add Data</button>
      </form>
    </section>
    <section class="container">
      <h3>Users Details</h3>
      <table class="table">
        <thead>
          <tr>
            <th class="col-md-6">Name</th>
            <th class="col-md-6">Email</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let data of dataArr">
            <td>{{data.name}}</td>
            <td>{{data.email}}</td>
          </tr>
        </tbody>
      </table>
    </section>
angular
5 Answers

You can use two-way data binding. For example:

<input type="text" class="form-control" [(ngModel)]="userName">

In the code below, the button is disabled if userName (in this case) is empty. 

<button class="btn btn-primary" [disabled]="userName === ''">Enter name</button>

If you tweak this to fit your code, it should work.

user_73890180

The best solution for you is to bind your form data using two-way binding with [(ngModel)]. That is, binding your name and email values in your template with that of your component like so:

<input type="text" class="form-control" [(ngModel)]="name" id="name" placeholder="John Doe">

<input type="email" class="form-control" [(ngModel)]="email" id="email" placeholder="john.doe@example.com">

Then you can easily disable the button with:

<button type="submit" [disabled]="!name || !email" class="btn btn-default" (click)="getValues($event, name, email)">Add Data</button>

Currently, you are referencing the value of email and name from the template data variable. This is called one-way data binding. What this does is that it reads the value of the template on load and when you update your input fields, only the template data is updated, the data in your component is not, hence the button remains disabled.

user_64693680

Make sure that the conditional after [disabled] is invalid (invalid being true), that way, Angular is essentially saying that if that particular input has an invalid entry, then the button is disabled until the entry is valid.

<button type="submit" class="btn btn-primary" onclick="window.location.reload()" [disabled]="userForm.invalid">Submit Application</button>

Here my code is saying if the entire form is invalid, then disable the button until userForm.invalid is false.

user_108015130

I would add the "required" validation on your input and use template-driven approach

<form #formcontrol="ngForm">
  <input type="text" class="form-control" required>
  <button [disabled]="!formcontrol.form.valid">Enter name</button>
</form>
user_88963320

I would do something like:

<input type="text" 
       placeholder="name"
       name="name"
       [(ngModel)]="myName"
       #name="ngModel" required>

<input type="text" 
       placeholder="email"
       name="email"
       [(ngModel)]="myEmail"
       #email="ngModel" required>

<button class="classBtn" type="submit"
        [disabled]="name.errors?.required || email.errors?.required">
    SEND
</button>

the key is on #name="ngModel" required and #email="ngModel" required and in the button [disabled]="name.errors?.required || email.errors?.required"

user_91691290
Related