title: Accessing FormArray in nested FormGroup to create dynamically
body: <p>I am trying to figure out how to access this FormArray in a nested FormGroup in order to default fill and dynamically create the form groups. I want to create my form where its value's data structure will mimic the incoming data. I am currently getting the following error:</p>
  <blockquote>
  <p>ERROR Error: Cannot find control with path: 'costs -&gt; 0'</p>
  </blockquote>
  <p>I have tried &quot;flattening&quot; the nested FormGroup, but then I do not get the correct output value as it is missing the nested &quot;items&quot; object. I have commented that code in the below StackBlitz.</p>
  <p>StackBlitz: <a href="https://stackblitz.com/edit/angular-ivy-6lvano" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-ivy-6lvano</a></p>
  <p>Data</p>
  <pre><code>{
      &quot;type&quot;: &quot;Transportation&quot;,
      &quot;costs&quot;: {
        &quot;items&quot;: [
          {
            &quot;category&quot;: &quot;Land&quot;,
            &quot;name&quot;: &quot;Taxi&quot;,
            &quot;amount&quot;: 50
          },
          {
            &quot;category&quot;: &quot;Land&quot;,
            &quot;name&quot;: &quot;Train&quot;,
            &quot;amount&quot;: 500
          },
          {
            &quot;category&quot;: &quot;Air&quot;,
            &quot;name&quot;: &quot;Plane&quot;,
            &quot;amount&quot;: 500
          },
        ]
      }
    }
  </code></pre>
  <p>Component</p>
  <pre><code>export class AppComponent  implements OnInit {
    invoiceForm: FormGroup;
    get costs(): FormArray {
      // return this.invoiceForm.get('costs') as FormArray;
      return this.invoiceForm.get('costs.items') as FormArray;
    }
    
    data =  {
      &quot;type&quot;: &quot;Transportation&quot;,
      &quot;costs&quot;: {
        &quot;items&quot;: [
          {
            &quot;category&quot;: &quot;Land&quot;,
            &quot;name&quot;: &quot;Taxi&quot;,
            &quot;amount&quot;: 50
          },
          {
            &quot;category&quot;: &quot;Land&quot;,
            &quot;name&quot;: &quot;Train&quot;,
            &quot;amount&quot;: 500
          },
          {
            &quot;category&quot;: &quot;Air&quot;,
            &quot;name&quot;: &quot;Plane&quot;,
            &quot;amount&quot;: 500
          },
        ]
      }
    };
  
    constructor(private fb: FormBuilder) {
    }
  
    ngOnInit() {
      let items = FormArray[10] = [];
      if (this.data) {
        for (const cost of this.data.costs.items) {
          items.push(this.buildExpenseItem(cost.category, cost.name, cost.amount));
        }
      } else {
        items = [ this.buildExpenseItem() ];
      }
      
      this.invoiceForm = this.fb.group({
        type: [''],
        // costs: this.fb.array(items)
        costs: this.fb.group({ items: this.fb.array(items) })
      });
    }
  
    buildExpenseItem(category?: string, name?: string, amount?: number): FormGroup {
      return this.fb.group({
        category: [category],
        name: [name],
        amount: [amount]
      });
    }
  
    addExpenseItem() {
      this.costs.push(this.buildExpenseItem());
    }
  
    displayOutput() {
      console.log(this.invoiceForm.value);
    }
  }
  </code></pre>
  <p>HTML</p>
  <pre><code>&lt;h1&gt;Invoices&lt;/h1&gt;
  
  &lt;form [formGroup]=&quot;invoiceForm&quot;&gt;
    &lt;ng-container formArrayName=&quot;costs&quot;&gt;
      &lt;div *ngFor=&quot;let cost of costs.controls; let i = index&quot;&gt;
        &lt;div [formGroupName]=&quot;i&quot;&gt;
          {{ i }}
          &lt;input formControlName=&quot;category&quot; placeHolder=&quot;Category&quot;&gt;
          &lt;input formControlName=&quot;name&quot; placeHolder=&quot;Name&quot;&gt;
          &lt;input formControlName=&quot;amount&quot; placeHolder=&quot;Amount&quot;&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/ng-container&gt;
  
    &lt;button (click)=&quot;addExpenseItem()&quot;&gt;Add&lt;/button&gt;
  &lt;/form&gt;
  
  &lt;button (click)=&quot;displayOutput()&quot;&gt;Display&lt;/button&gt;
  </code></pre>