angular – 如何引用ngFor中添加的控件?
发布时间:2020-12-17 17:23:05 所属栏目:安全 来源:网络整理
导读:我在模板驱动的表单中使用ngFor添加了几个输入,我想在输入无效时添加相应的错误消息.通常,如果我没有使用ngFor,我会使用#inputName =“ngModel”.为了引用动态添加的输入,我有什么方法可以做这样的事情吗? 基本上我想做这样的事情: div *ngFor="let field
我在模板驱动的表单中使用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> 解决方法
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 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |