How can I retrieve the validation status of an NgModelGroup that is nested within an NgFor?

If I don't have the NgFor, I can assign the group to a template variable like this:

<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.

Here is a plunker I created to test this with:

How can I retrieve the validation status of an NgModelGroup that is nested within an NgFor?

If I don't have the NgFor, I can assign the group to a template variable like this:

<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.

Here is a plunker I created to test this with: https://plnkr.co/edit/RXi2T52kynsWLr4fDMVa?p=preview

• javascript
• angular
• angular-ngmodel
• angular2-ngmodel

Share Improve this question Follow edited Apr 25, 2017 at 18:25 Matthew Green 10.4k44 gold badges3939 silver badges5555 bronze badges asked Apr 25, 2017 at 16:33 tam5tam5 3,23755 gold badges2626 silver badges4646 bronze badges 5

• Is it working, what is the error? – Roman C Commented Apr 25, 2017 at 16:35
• no it couldnt possibly work how would it know which control i want? The current error is that the control is undefined. i will update question – tam5 Commented Apr 25, 2017 at 16:47
• Have you tried using reactive forms? If you do so, all your logic will be inside the ponent, you will have an object with all fields and validation states (valid, dirty, pristine...) on each one, and you will be able to set a property based on them. – mariogl Commented Apr 25, 2017 at 18:47
• You're trying to get status from array of groups. What is the purpose? What it the expected behavior? – yurzui Commented Apr 25, 2017 at 19:22
• 1 @yurzui, the purpose/use case is: I have a plex form with a variable number of these "form groups". in another portion of the form template (higher up and outside of the *ngFor) I would like to display the validation status of these groups – tam5 Commented Apr 25, 2017 at 19:24

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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": { ... }}, ... }
-->

Yes you can, use it like this.

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

Plunker