title: Angular: how to loop through a FormArray which is nested in a FormGroup which is already nested in a different FormGroup?
body: <p>I use this block of code to create my form:</p>
  
  <pre><code>@Input() fetchedTask: Task;
  taskForm: FormGroup;
  formThresholds: FormArray;
  
  </code></pre>
  
  <pre><code>this.taskForm = this._formBuilder.group({
              taskId: null,
              groupId: this.groupId,
              name: ["", [Validators.required]],
              taskType: this.taskTypeId,
              etc.
              configuration: this._formBuilder.group({
                  name: ["", Validators.required],
                  path: ["", Validators.required],
                  thresholds: this._formBuilder.array([])
              })
          });
  </code></pre>
  
  <p>I later set values of the form using <code>setValue()</code>:</p>
  
  <pre><code>this.taskForm.controls["taskId"].setValue(this.fetchedTask.taskId);
  </code></pre>
  
  <p>I set the value of my FormArray using:</p>
  
  <pre><code>this.fetchedTask.configuration.thresholds.forEach((x)=&gt;{
                this.addItem(x.value, x.name);
              })
  
  addItem(value: number, name: string): void {
        this.formThresholds = this.taskForm.get('configuration.thresholds') as FormArray;
        this.formThresholds.push(this.createItem(value, name));
      }
  
  createItem(value: number, name: string): FormGroup{
        return this._formBuilder.group({
          value: value,
          name: name
        });
      }
  
  </code></pre>
  
  <p>I really don't know how to approach looping through my array values and showing them in my form, with populated values.</p>
  
  <p>I tried this but with no success:</p>
  
  <pre><code>        &lt;div *ngFor="let threshold of taskForm.get('configuration.thresholds') let i = index;"&gt;
              &lt;div [formGroupName]="i"&gt;
                  &lt;input formControlName="name" placeholder="Threshold name"&gt;
                  &lt;input formControlName="value" placeholder="Threshold value"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>