如何引用 ngFor 中添加的控件？答案

【问题标题】：How can I reference control added in ngFor?如何引用 ngFor 中添加的控件？
【发布时间】：2017-08-22 08:09:46
【问题描述】：

我正在使用 ngFor 在模板驱动的表单中添加几个输入，并且我想在输入无效时添加相应的错误消息。通常，如果我不使用 ngFor，我会使用 #inputName="ngModel"。为了引用动态添加的输入，我有什么办法可以做这样的事情吗？

基本上我想做这样的事情：

<div *ngFor="let field of fields; let i = index">
        <label>{{field.label}}</label> <input [ngModel]="field.value" required #field{{i}}="ngModel" />
        <div *ngIf="field{{i}}.invalid"> This field is required </div>
</div>

【问题讨论】：

标签： angular angular2-template ngfor angular-validation

【解决方案1】：

您不需要做任何特殊的事情来引用模板中的该字段 - 只需直接使用别名（例如 'f'）

  <div *ngFor="let field of fields; let i = index">
    <label>{{field.label}}</label> <input [ngModel]="field.value" required #f="ngModel" />
    <div *ngIf="f.invalid"> This field is required </div>
  </div>

【讨论】：

【解决方案2】：

garth74 的回答几乎是正确的。在表单中，name 属性必须是唯一的，以便在您的情况下，每个输入字段都被识别为单独的表单控件。所以这里使用索引来分配唯一的名称：

name="f{{i}}"

...所以您的代码将如下所示：

<div *ngFor="let field of fields; let i = index">
  <label>{{field.label}}</label> <input name="f{{i}}" [ngModel]="field.value" required #f="ngModel" />
  <div *ngIf="f.invalid"> This field is required </div>
</div>

这是一个

DEMO

【讨论】：

是的，没错..我一定错过了关于它在模板驱动表单中的那部分:-)