Angular 2 create dynamic formcontrol that contains formarray - html

Question

I have a reactive input form with a dynamic amount of inputs that I need to add form controls to.
The parent control Mammals will contain a variable amount of MammalId's, and each MammalId will contain a FormArray of variable length.
I have created typescript code that will generate the form as I described, however, I haven't been able to set my form to my HTML.
And an example of my generated form:
I've tried mapping the form to my html in the following way:
<form [formGroup]="inputForm">
<div *ngFor="let mammal of Mammals; let i = index">
<div *ngFor="let id of mammal.ids; let z = index">
<!-- parent form control -->
<div [formGroupName]="mammals">
<!-- mammals[i].id resolves to 'mammalIdx' -->
<div [formGroupName]="mammals[i].id">
<!-- this should map as the controls Form Array -->
<input [formControlName]="z">
</div>
</div>
</div>
</div>
</form>
But when I try and run this, I get:
Error: Cannot find control with unspecified name attribute
How can I set my html to my form values?
Thank you

Answer 1

The parent control Mammals will contain a variable amount of MammalId's, and each MammalId will contain a FormArray of variable length.
As per my understand the arry you expected may be like this
[
{
"Mammals":[
{
"mammalId":[
{
}
]
}
]
}
]
for that above array the form will be like this
this.inputForm = this.fb.group({
Mammals: this.fb.array([}
mammalId: this.fb.array([{
z: ''
}
])}
])
})
for that above array html should be like this
HTML
<form [formGroup]="inputForm">
<div formArrayName="Mammals">
<div *ngFor="let mammal of inputForm.get('Mammals'); let i = index" [formGroupName]="i">
<div formArrayName="mammalId">
<div *ngFor="let id of mammal.get(mammalId); let z = index" [formGroupName]="z">
<!-- parent form control -->
<!-- mammals[i].id resolves to 'mammalIdx' -->
<!-- this should map as the controls Form Array -->
<input [formControlName]="z">
</div>
</div>
</div>
</div>
</div>
</div>
</form>
It may be helps you