trying to display a nested FormGroup with *ngFor, not sure how to access it

Question

I have a FormArray of FormGroups. Right now the FormArray, experiences, has one object, a FormGroup containing 3 controls, companyName, jobDescription, and yearsWorked. The problem is that when I console.log the FormArray object I see that the data object works like this: FormArray.controls.FormGroup.controls. I can't figure out what to call the FormGroup here so I can access it. So the html would be something like:

<div *ngFor="let exp of experiences.controls.[what do I call this?].controls"> 
    <input [formControlName]="n" placeholder="Experience"> 
</div>

The file itself can be seen here.

Non-working plunker

Answer 1

---

To continue on DeborahK's answer, so that we can achieve the solution you want to have, i.e having experience as an formArray, let's do the following and let's also look at your code. First error is here:

<div *ngFor="let exp of experiences.controls.FormGroup.controls">

The iteration is wrong, it should simply be:

<div *ngFor="let exp of experiences.controls; let n=index">

We need the index here, since you are having formgroups inside this array, so each has be named with the index.

Then like DeborahK suggested, we need a pipe, because a your `expArray` is an object, and cannot be iterated with `*ngFor` without using a pipe.

UPDATE: Since this question has been asked and answer written, angular provides keyvalue pipe, so there is no need to create a custom pipe:

  <div formArrayName="experiences">
    <div *ngFor="let exp of experiences.controls; let n=index">
      <div [formGroupName]="n">
        <div *ngFor="let e of expArray | keyvalue">
          <input [formControlName]="e.key" placeholder="Experience">
        </div>
      </div>
    </div>
  </div>

STACKBLITZ