在 Angular 2 中使用模板驱动表单和 NgFor 进行单选按钮验证

Question

有人可以解释一下为什么在不使用 NgFor 选项的情况下尝试验证单选按钮时有效：

@Component({
  selector: 'rio-app',
  template: `
    <form #myForm="ngForm">

      <label>
        Male: 
        <input type="radio" name="gender" value="Male" 
          ngModel required #gender="ngModel"
        />
      </label>

      <label>
        Female: 
        <input type="radio" name="gender" value="Female" 
          ngModel required #gender="ngModel"
        />
      </label>

      <div [hidden]="!gender.hasError('required')">
        The gender is required
      </div>

    </form>
  `
})
export class AppComponent {}

普朗克

但是如果我尝试使用NgFor它做同样的事情会失败：

@Component({
  selector: 'rio-app',
  template: `
    <form #myForm="ngForm">

      <label *ngFor="let gender of genders">
        {{ gender }}: 
        <input type="radio" name="gender" [value]="gender" 
          ngModel required #myGender="ngModel"
        />
      </label>

      <div [hidden]="!myGender.hasError('required')">
        The gender is required
      </div>

    </form>
  `
})
export class AppComponent {
  genders = ['Male', 'Female']
}

普朗克

我在浏览器的控制台中收到一条错误消息，内容为：

Cannot read property 'hasError' of undefined

有任何想法吗？

Answer 1

因此，我最终在 Angular 存储库中提出了一个问题，一个人 (@alexzuza) 给了我一个很好的答案，我想与您分享以供将来参考：

import { Component } from '@angular/core';

@Component({
  selector: 'rio-app',
  template: `
    <form #myForm="ngForm">

      <input type="text" />

      <ng-container *ngFor="let gender of genders; let isLast = last">

        <label>
          {{ gender }}: 
          <input type="radio" name="gender" [value]="gender" 
            ngModel required #myGender="ngModel"
          />
        </label>

        <div *ngIf="isLast" [hidden]="!myGender.hasError('required')">
          The gender is required
        </div>

      </ng-container>

    </form>
  `
})
export class AppComponent {
  genders = ['Male', 'Female']
}

NgFor据我了解，诀窍是在using中执行所有操作，<ng-container>因为循环中创建的每个变量都将具有块作用域。

这是一个正在工作的笨蛋