[英]ngModelGroup inside ngFor?
How can I retrieve the validation status of an NgModelGroup
that is nested within an NgFor
? 如何获取嵌套在
NgFor
中的NgModelGroup
的验证状态?
If I don't have the NgFor
, I can assign the group to a template variable like this: 如果没有
NgFor
,可以将组分配给模板变量,如下所示:
<p *ngIf="addressCtrl.invalid">Address is invalid.</p>
<div ngModelGroup="address" #addressCtrl="ngModelGroup">
<input name="city" [ngModel]="address.city" required>
<input name="state" [ngModel]="address.state" required>
<input name="zip" [ngModel]="address.zip" required>
</div>
But instead I want to have something like this: 但是我想拥有这样的东西:
<p *ngIf="addressCtrl.invalid">Address # {{index}} is invalid.</p>
<div *ngFor="let address of addresses">
<div ngModelGroup="address" #addressCtrl="ngModelGroup">
<input name="city" [ngModel]="address.city" required>
<input name="state" [ngModel]="address.state" required>
<input name="zip" [ngModel]="address.zip" required>
</div>
</div
The problem is that I get addressCtrl
is undefined. 问题是我得到的
addressCtrl
是未定义的。
Here is a plunker I created to test this with: https://plnkr.co/edit/RXi2T52kynsWLr4fDMVa?p=preview 这是我创建的一个测试用的插件: https ://plnkr.co/edit/RXi2T52kynsWLr4fDMVa?p=preview
It seems to work fine, if you move 如果您移动,它似乎工作正常
<p *ngIf="addressCtrl.invalid">Address # {{index}} is invalid.</p>
inside your iteration. 在您的迭代中。
Your plunker has a bit different code, so there it would be: 您的窃听器的代码略有不同,因此可能是:
<p *ngIf="group.invalid">Address # {{index}} is invalid.</p>
Your forked 你分叉
addressHistory valid? {{ myHistoryGroup.valid }}
<ul ngModelGroup="addressHistory" #myHistoryGroup="ngModelGroup">
<li *ngFor="let i = index; let address of addressHistory">
<div [ngModelGroup]="i" #myLi="ngModelGroup">
address valid? {{ myLi.valid }}
<input type="text" [(ngModel)]="address.state" name="state" />
<input type="text" [(ngModel)]="address.country" name="country" />
</div>
</li>
</ul>
<!--
#myForm.value will be like this:
{ "addressHistory": { "0": { ... }, "1": { ... }}, ... }
-->
Yes you can, use it like this. 是的,您可以这样使用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.