2

I’m having a hard time figuring out how to iterate over a ControlArray that contains Controlgroups in a template. In TypeScript, so far I have created the ControlArray, and by iterating over data received from a remote service, I added a few ControlGroups to the array. Everything fine up to this point, and I can see the expected data structure in the console.

In the template, I have this:

<div *ngFor="#c of categories.controls">
    <div ngControlGroup="c">
    </div>
</div>

... where categories is the ControlArray (which holds an array of ControlGroups in its controls property). When I leave out the inner <div>, I don’t get an error, which suggests that Angular agrees with me that categories.controls is indeed an array. But as soon as I re-add the inner <div> (where I expect the local variable c to be one of the objects in the array), I get an exception with message “Cannot find control 'c' in [c in ]”. Also, I tried various other syntactical approaches, but none of them worked. In addition to a “Cannot find control …” method I also got “Cannot find a differ supporting object …”, but that didn’t take me any further.

Any hints regarding what I’m doing wrong?

Improve this question
2

3 Answers 3

Reset to default
1

ngControlGroup is defining a new control group. If I understand your question correctly, you want to actually be editing items within a control group inside a control array. Check out this plnkr: https://plnkr.co/edit/3gM2TuMGBW13HNATUcCO

<div *ngFor="#c of categories.controls; #i = index">
      Control group {{i}}:
    <div>
        <input type="text" class="form-control m-b" [ngFormControl]="c.controls.title"/>
        <input type="text" class="form-control m-b" [ngFormControl]="c.controls.id"/>
      </div>  
    </div>
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

The key was actually changing ngControl to [ngFormControl]in my Plunkr (plnkr.co/edit/UCwXTkcMuBQExA7p38TV). Thanks.
1

One error is 

ngControlGroup="c"

which doesn't do any binding. It passes the literal c to ngControlGroup. It should be:

[ngControlGroup]="c"

The errors that are still produced after this fix seem because there are no controls.

Improve this answer

Comments

1

Error is resolved by changing 

ngControlGroup="c"

into 

attr.ngControlGroup="c"

Because by assigning c to ngControlGroup you are just assigning the value instead of any binding. but strange why [ngControlGroup] still produces some error.apart from these here is working example https://plnkr.co/edit/Yw21a1aSivNg4G6gYkhF?p=preview

Improve this answer

1 Comment

Thanks so far. I further edited your plunk: plnkr.co/edit/UCwXTkcMuBQExA7p38TV?p=info . In the template, I added a call to a method dump(), which proves that c.controls.title is in fact a Control, but still, I get an error when trying to use that as value of the ngControl attribute in the template. Plus: the number of displayed control groups is incorrect. Any ideas?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.