title: Angular 4: Access Form Controls in HTML page
body: <p>I am validating my HTML form in Angular 4 , wanted to enable/disable a button by checking if a form is valid/invalid</p>
  
  <pre><code>&lt;form novalidate #shiftForm="ngForm"&gt;
     &lt;table&gt;
     &lt;thead&gt;
        &lt;th&gt;Name&lt;/th&gt;
        &lt;th&gt;time&lt;/th&gt;
     &lt;/thead&gt;
     &lt;tbody *ngFor=let item of Items&gt;
        &lt;tr&gt;
           &lt;td&gt;
              &lt;div class="form-group"&gt;
                 &lt;input class="form-control" type="text" required name="shiftName"
                 [(ngModel)]="item.ShiftName"#shiftName="ngModel" id="shiftName"&gt;
                 &lt;div *ngIf="shiftName.invalid &amp;&amp; (shiftName.dirty || shiftName.touched)" class="alert alert-danger"&gt;
                    &lt;div *ngIf="shiftName.errors.required"&gt;REQUIRED&lt;/div&gt;
                 &lt;/div&gt;
              &lt;/div&gt;
           &lt;/td&gt;
           &lt;td&gt;
              &lt;div class="form-group"&gt;
                 &lt;input class="form-control" type="text" required name="shiftTime"
                 [(ngModel)]="item.ShiftTime" #shiftTime="ngModel" id="shiftTime"&gt;
                 &lt;div *ngIf="ShiftTime.invalid &amp;&amp; (ShiftTime.dirty || ShiftTime.touched)" class="alert alert-danger"&gt;
                    &lt;div *ngIf="ShiftTime.errors.required"&gt;REQUIRED&lt;/div&gt;
                 &lt;/div&gt;
              &lt;/div&gt;
           &lt;/td&gt;
        &lt;/tr&gt;
     &lt;/tbody&gt;
     &lt;/table&gt;
  &lt;button [disabled]="shiftForm.invalid"
  (click)="updateItems()"&gt;APPLY
  &lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>component file :</p>
  
  <pre><code>import {Component, OnInit, Inject, ViewChild, SimpleChange, SimpleChanges} from '@angular/core';
  import {ElementRef, Renderer2} from '@angular/core';
  import {Transition, StateService} from '@uirouter/angular';
  import {ViewEncapsulation} from '@angular/core';
  
  @Component({
      selector: 'shift-details',
      templateUrl: './shift-details.component.html',
      styleUrls: ['./shift-details.component.less'],    
      encapsulation: ViewEncapsulation.None
  })
  
  export class ShiftDetailsComponent implements OnInit {
  
      //variable declaration
      Items:any = [];
  
      constructor(
                  private rd: Renderer2,                                        
                  private transition: Transition,
                  private $state: StateService) {
          this.$stateParams = transition.params();
      }
  
      ngOnInit() {
      this.Items = getShiftItems();      
      }
  
      getShiftItems() {
      //calling the service here to load the data in this.Items     
  
      }
  
  
      updateItems() {
       //calling the service here to update this.Items
  
       }
  
  }
  </code></pre>
  
  <p>Even though when both the input fields are empty and showing the validation error <code>shiftForm.invalid</code> is still not disabling the button. I have tried <code>shiftForm.form.shiftName.invalid</code>, <code>shiftform.shiftName.invalid</code>, <code>shiftForm.form['shiftName'].invalid</code>,<code>shiftForm.controls['shiftName'].invalid</code> etc.. None of them are working. Even when i try just the element name directly like <code>shiftName.invalid</code> or <code>shiftName.errors</code> still the button is not getting disabled. </p>
  
  <p>What am i doing wrong ? I wanted to validate the form in HTML file only, do not want to do reactive form validation in the typescript file.</p>