title: Check if a form is valid from a parent component using Angular 4
body: <p>I am trying to check the validity of a form placed on a child component from a parent component. The best scenario would be to disable a button on the parent component if the form is invalid or in the worse scenario to trigger an alert from the parent button if form is invalid.</p>
  
  <p>I could achieve to check if the form has 'ng-invalid' class from the parent using a @ViewChild decorator to call a function on the child component as follows:</p>
  
  <p>Parent Component:</p>
  
  <pre><code>export class CandidateVerificationComponent implements OnChanges, OnInit {
  
  @ViewChild(RightPanelComponent) rightPanelPointer: RightPanelComponent;
  
  saveAndFinish() {
  
      if (this.rightPanelPointer.checkFormValidity())
      {
          alert('No Valid');
          return;
      }
  
      this.rightPanelPointer.onSubmit();
  
    }    
  }
  </code></pre>
  
  <p>Child Component:</p>
  
  <pre><code>export class RightPanelComponent implements OnChanges , OnInit{
  
  @ViewChild("candiateForm", { read: ElementRef }) tref: ElementRef;
  
     checkFormValidity():boolean {        
      return (this.tref.nativeElement.className.indexOf('ng-invalid') !== -1);
     }  
  }
  </code></pre>
  
  <p>It works for the worst scenario, but I do not like the idea to link the component to the DOM, I would rather a smarter idea.</p>
  
  <p>I would like to use a template reference variable (#candiateForm), for example the one that allows to check validity in the submit button (see below) from the form (child) in order to check validity from the parent. Is it possible to have access to that template variable from the parent?</p>
  
  <pre><code> &lt;form (ngSubmit)="onSubmit()" #candiateForm="ngForm" name="candiateForm" (change)="formChanged()"&gt;
      &lt;div class="form-group"&gt;
        &lt;label class="control-label" for="firstName"&gt;First name:&lt;/label&gt;                           
        &lt;input type="text" class="form-control" id="firstName" pattern="^[^0-9]+$" required [(ngModel)]='candidate.firstName' name="firstName" #firstName="ngModel"&gt;
     &lt;/div&gt;
  &lt;button type="submit" class="btn btn-default" [disabled]="!candiateForm.form.valid"&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>