Angular 访问嵌套FormGroup中的FormArray以动态创建

我试图弄清楚如何在嵌套的FormGroup中访问此FormArray，以便默认填充和动态创建表单组。我想创建一个表单，它的值的数据结构将模拟传入的数据。我当前收到以下错误：

错误：找不到路径为“成本->0”的控件

我尝试过“展平”嵌套的FormGroup，但由于缺少嵌套的“items”对象，因此没有得到正确的输出值。我已经在下面的StackBlitz中对代码进行了评论

闪电战：

资料

组成部分

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 =  {
    "type": "Transportation",
    "costs": {
      "items": [
        {
          "category": "Land",
          "name": "Taxi",
          "amount": 50
        },
        {
          "category": "Land",
          "name": "Train",
          "amount": 500
        },
        {
          "category": "Air",
          "name": "Plane",
          "amount": 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);
  }
}

HTML

发票
{{i}
添加
展示

{{i}
添加

网址：

这里我们有两个表单组：发票表单和项目

因此，增加了：

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 =  {
    "type": "Transportation",
    "costs": {
      "items": [
        {
          "category": "Land",
          "name": "Taxi",
          "amount": 50
        },
        {
          "category": "Land",
          "name": "Train",
          "amount": 500
        },
        {
          "category": "Air",
          "name": "Plane",
          "amount": 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);
  }
}

<h1>Invoices</h1>

<form [formGroup]="invoiceForm">
  <ng-container formArrayName="costs">
    <div *ngFor="let cost of costs.controls; let i = index">
      <div [formGroupName]="i">
        {{ i }}
        <input formControlName="category" placeHolder="Category">
        <input formControlName="name" placeHolder="Name">
        <input formControlName="amount" placeHolder="Amount">
      </div>
    </div>
  </ng-container>

  <button (click)="addExpenseItem()">Add</button>
</form>

<button (click)="displayOutput()">Display</button>

<form [formGroup]="invoiceForm">
  <ng-container formArrayName="costs">
    <form formGroupName="items">
    <div *ngFor="let cost of costs.controls; let i = index">
      <div [formGroupName]="i">
        {{ i }}
        <input formControlName="category" placeHolder="Category">
        <input formControlName="name" placeHolder="Name">
        <input formControlName="amount" placeHolder="Amount">
      </div>
    </div>
    </form>
  </ng-container>

  <button (click)="addExpenseItem()">Add</button>
</form>