2

如何检索NgModelGroup嵌套在 中的的验证状态NgFor

如果我没有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>

但相反,我想要这样的东西:

<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

问题是我得到addressCtrl的是未定义的。

这是我创建的用于测试它的 plunker:https ://plnkr.co/edit/RXi2T52kynsWLr4fDMVa?p=preview

4

2 回答 2

7
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": { ... }}, ... }
-->

是的,你可以,像这样使用它。

于 2017-10-24T14:23:09.567 回答
2

它似乎工作正常,如果你移动

<p *ngIf="addressCtrl.invalid">Address # {{index}} is invalid.</p>

在你的迭代中。

你的 plunker 有一些不同的代码,所以它会是:

<p *ngIf="group.invalid">Address # {{index}} is invalid.</p>

你的分叉

普朗克

于 2017-04-25T17:02:10.290 回答