title: Validating nested forms in Angular 2
body: <p>I have a form which has three components in it. The following is the html of the form:</p>
  
  <pre><code>&lt;div class="p-r-0 m-t-1 p-r-half p-l-half"&gt;
      &lt;div class="tab-content"&gt;        
          &lt;div *ngIf="vitalsData != null"&gt;
              &lt;emp-info *ngIf="far == '1'" [(dataContext)]="empData"&gt;&lt;/emp-info&gt;
              &lt;emp-work *ngIf="sections == '2'" [(dataContext)]="empData"&gt;&lt;/faa-ch145&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="right pull-top pos-relative"&gt;
             &lt;button class="btn btn-primary" type="button"&gt;Reset&lt;/button&gt;
             &lt;button class="btn btn-primary" type="button"&gt;Save&lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>There are two components emp-info and emp-work. The emp-info and emp-work pages have some required fields. Now when I save the required fields should be validated. But I have the required fields in the child component and the save button in the parent component. Could anyone let me know how we could validate and display errors for the fields in the child component.</p>