Angular: Nested ngFor on array of objects with FormArray

0
votes

I have a problem with nested ngFor maybe I'm using it wrong, in the Home component I have an empty array of objects designInputs:{}[] = []; which I fill it by using a Reactive-form in another component,Each form is stored as an object in this array, the form is built using the FormArray so it's not fixed size form then each object has it's own length.

in the home component I am looping through that array of objects designInputs

<div *ngFor="let form of designInputs;let i = index"> //number of forms
 <h5 class="card-title" *ngFor="let input of form ;let j =index" > {{input [i]}}</h5> //number of inputs in each form
</div>

the first loop should be responsible for how many objects (forms filled), So to get the whole form object and the second loop is to get the values of the inputs saved from each form [each form (object) has different number of inputs.

Edit: in the other component I have the formArray named "newFiles" inside a form called "designForm" then to convert it to object I did that :

let inputsValues = {...this.designForm.get('newFiles').value};

After, I pass it to a service then to the home component so designInputs for example should look something like that :

[
{0:"input1Value",
 1:"input2Value"
},
{0:"input1Value",
 1:"input2Value",
 2:"input3Value"
}
]

So I can't initialize it previously because at the moment I don't know how many items each object will contain.

what is the wrong here and how to fix it ?

2
angularnested-loopsangular-reactive-formsngforformarray
Think you could add the initialization code where you're using the FormBuilder reference. Blindly though id say try doing this, if you say each object in the array is a form array then you need to get the controls so change input in the <h5> loop to input['controls'] - ash.io
hey thanks for the help ,I tried it actually it gives me an empty div, I edited the post to reply on the first note could u check it please.@AshwynHorton - Ziad Mohamed

2 Answers

0
votes

I found the solution that I was looking for,Using a built in Pipe called "|keyvalue"

<div *ngFor="let form of designInputs;let d = index">
    <h5 class="card-title" *ngFor="let input of form | keyvalue">{{input.value}}</h5>
</div>
0
votes

If what you're saying in your edit is the case then your HTML should look something like this:

<div *ngFor="let form of designInputs">
   <h5 class="card-title" *ngFor="let input of form" >{{input}}</h5>
</div>

It is possible that it may not work, I am basing this on the assumption that since arrays are simply objects whose keys are numbers then it should still iterate. However should the iteration not work then try it like so:

<div *ngFor="let form of designInputs">
   <h5 class="card-title" *ngFor="let input of Object.values(form)" >{{input}}</h5>
</div>

Edit

As per your solution:

<div *ngFor="let form of designInputs">
   <h5 class="card-title" *ngFor="let input of form | keyvalues" >{{input.value}}</h5>
</div>