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

Question

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="[email protected]" #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>

Answer 1

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="[email protected]">

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.

Answer 2

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.