首页 文章

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

提问于
浏览 次
4

我在模板驱动的表单中使用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

2 回答

  • 6

    你不需要做任何特别的事情来引用模板中的那个字段 - 只需直接使用别名（例如'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>
    回复于
  • 1

    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

    回复于

相关问题