title: Validate input inside a ngFor using template driven forms
body: <p>In our Angular form (we are using <a href="https://angular.io/guide/forms#template-driven-forms" rel="nofollow noreferrer">template driven forms</a>) we have a list of input fields which are rendered dynamically, as so, we need to validate then. Following this: <a href="https://stackoverflow.com/questions/39672719/using-template-driven-form-with-dynamic-input-list-ngfor">Using template driven form with dynamic input list (ngFor)</a> I didn't come any further as it seems to be outdated, as the plunkr sample is not working.</p>
  
  <p>that is our <strong>tbody</strong> which renders our list:</p>
  
  <pre><code>  &lt;tbody&gt;
      &lt;tr *ngFor="let item of items; let i=index"&gt;
        &lt;td&gt;&lt;span&gt;{{ item.categoryName }}&lt;/span&gt;&lt;/td&gt;
        &lt;td class="text-right"&gt;
          &lt;input *ngIf="editMode" 
            type="number" 
            tabindex="1" 
            autocomplete="off" 
            [(ngModel)]="item.value" name="value-{{item.categoryId}}" #value="ngModel"
            required 
          /&gt;
          {{value.valid}} &lt;!--As I'm using ngForm I was expecting to receive false or true here--&gt;
          &lt;span *ngIf="!editMode"&gt;{{ item.value }}&lt;/span&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;app-status [status]="item.status"&gt;&lt;/app-status&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  </code></pre>
  
  <p>This works fine, the list  can be seen, but the validation does not work.</p>
  
  <p>if I try: <code>{{value.valid}}</code> I get the following error:</p>
  
  <blockquote>
    <p>ERROR TypeError: Cannot read property 'valid' of undefined</p>
  </blockquote>
  
  <p>Means, my instance of ngModel did't work.</p>
  
  <p>What am I missing?</p>