title: How Do I disable the button if the input box is empty and enable when field is filled
body: <p>I want the button disabled if the user has not filled the input fields. I added a condition <code>(name.value.length === 0 || email.value.length === 0)</code> This disables the button on load but when values are input in the text fields the disabled is not removed.</p>
  
  <p>Here is my code:</p>
  
  <pre><code> &lt;section class="container col-md-12 col-md-offset-3"&gt;
        &lt;h1&gt;Add Users&lt;/h1&gt;
        &lt;form class="form-inline"&gt;
          &lt;div class="form-group"&gt;
            &lt;label for="exampleInputName2"&gt;Name&lt;/label&gt;
            &lt;input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe" #name&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
            &lt;label for="exampleInputEmail2"&gt;Email&lt;/label&gt;
            &lt;input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com" #email&gt;
          &lt;/div&gt;
          &lt;button type="submit" [disabled]="(name.value.length === 0 || email.value.length === 0)" class="btn btn-default" (click)="getValues($event, name, email)"&gt;Add Data&lt;/button&gt;
        &lt;/form&gt;
      &lt;/section&gt;
      &lt;section class="container"&gt;
        &lt;h3&gt;Users Details&lt;/h3&gt;
        &lt;table class="table"&gt;
          &lt;thead&gt;
            &lt;tr&gt;
              &lt;th class="col-md-6"&gt;Name&lt;/th&gt;
              &lt;th class="col-md-6"&gt;Email&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
            &lt;tr *ngFor="let data of dataArr"&gt;
              &lt;td&gt;{{data.name}}&lt;/td&gt;
              &lt;td&gt;{{data.email}}&lt;/td&gt;
            &lt;/tr&gt;
          &lt;/tbody&gt;
        &lt;/table&gt;
      &lt;/section&gt;
  </code></pre>