title: Radio button validation using template driven forms and NgFor in Angular 2
body: <p>Could someone please explain me why when trying to validate a radio button without using NgFor for the options works:</p>
  
  <pre class="lang-js prettyprint-override"><code>@Component({
    selector: 'rio-app',
    template: `
      &lt;form #myForm="ngForm"&gt;
  
        &lt;label&gt;
          Male: 
          &lt;input type="radio" name="gender" value="Male" 
            ngModel required #gender="ngModel"
          /&gt;
        &lt;/label&gt;
  
        &lt;label&gt;
          Female: 
          &lt;input type="radio" name="gender" value="Female" 
            ngModel required #gender="ngModel"
          /&gt;
        &lt;/label&gt;
  
        &lt;div [hidden]="!gender.hasError('required')"&gt;
          The gender is required
        &lt;/div&gt;
  
      &lt;/form&gt;
    `
  })
  export class AppComponent {}
  </code></pre>
  
  <p><a href="https://plnkr.co/edit/ckmuLuaOJjEQKc2Mu9a7?p=preview" rel="noreferrer">Plunker</a></p>
  
  <p>But if I try to do the same thing using <code>NgFor</code> it fails:</p>
  
  <pre class="lang-js prettyprint-override"><code>@Component({
    selector: 'rio-app',
    template: `
      &lt;form #myForm="ngForm"&gt;
  
        &lt;label *ngFor="let gender of genders"&gt;
          {{ gender }}: 
          &lt;input type="radio" name="gender" [value]="gender" 
            ngModel required #myGender="ngModel"
          /&gt;
        &lt;/label&gt;
  
        &lt;div [hidden]="!myGender.hasError('required')"&gt;
          The gender is required
        &lt;/div&gt;
  
      &lt;/form&gt;
    `
  })
  export class AppComponent {
    genders = ['Male', 'Female']
  }
  </code></pre>
  
  <p><a href="https://plnkr.co/edit/GQLfWjIziR0oteFSwCQT?p=preview" rel="noreferrer">Plunker</a></p>
  
  <p>I'm getting an error message in the browser's console that says:</p>
  
  <p><code>Cannot read property 'hasError' of undefined</code></p>
  
  <p>Any ideas?</p>