title: Dynamic form validation using angular 2
body: <p>I am working on angular 2 application and creating the form fields dynamically(using json) in a subsection template. <br>I wanted to disable submit button when the form is invalid. <br></p>
  
  <pre><code>&lt;h1&gt;Form Validation&lt;/h1&gt;
  &lt;div &gt;
  &lt;form #loginForm="ngForm"&gt;
      &lt;subsection [question]="fieldsData"&gt;&lt;/subsection&gt;
      &lt;button  type="submit"  [disabled]="!loginForm.form.valid"&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Sub section as it follows </p>
  
  <pre><code>&lt;div *ngFor="let data of question"&gt;
  &lt;label&gt; {{data.displayName}}&lt;/label&gt;
  &lt;input type="data.dataType" name="data.fieldId" [(ngModel)]="data.fieldValue" required name="data.fieldId" #name="ngModel"&gt;
  &lt;div *ngIf="name.errors &amp;&amp; (name.dirty || name.touched)" class="alert alert-danger"&gt;
      &lt;div [hidden]="!name.errors.required"&gt;
          Name is required
      &lt;/div&gt;     
  &lt;/div&gt;
  &lt;br&gt;&lt;br&gt;
  </code></pre>
  
  <p></p>
  
  <p>I have a requirement where submit button should be enabled after all the required fields are filled <br> <br></p>
  
  <p>Created plunker link <a href="https://plnkr.co/edit/iug0RLvyp2hjMue5Wj5F?p=preview" rel="nofollow noreferrer">Here</a></p>