Angular 13用多对象数组初始化FormArray时出现控件路径未找到错误

你遇到的错误Cannot find control with path: 'variable-> 0 -> id'和当前贴出的代码不匹配（当前代码无variable表单数组名、id控件），推测是代码粘贴失误。针对你用现有数组初始化FormArray的需求，修正方案如下：

问题分析 #

你已经通过循环往box表单数组中添加了FormGroup，后续调用patchValue属于多余操作——因为push FormGroup时已经同步设置了对应值。另外，获取FormArray控件的方式可以更规范，避免潜在的类型或路径错误。

修正后的TS代码 #

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    const fruits = {
      data: [{name: 'Apple', value: 10}, {name: 'Orange', value: 5},{name: 'Banana', value: 20}]
    };

    // 直接将现有数组转换为FormGroup数组，一步初始化FormArray
    this.myForm = this.fb.group({
      box: this.fb.array(
        fruits.data.map(fruit => this.fb.group({
          name: fruit.name,
          value: fruit.value
        }))
      )
    });
  }

  // 用getter规范获取FormArray，类型更安全
  get boxArray(): FormArray {
    return this.myForm.get('box') as FormArray;
  }
}

修正后的HTML代码 #

<form [formGroup]="myForm">
  <div formArrayName="box">
    <!-- 直接使用getter返回的FormArray控件集合 -->
    <div *ngFor="let b of boxArray.controls; let i = index">
      <fieldset [formGroupName]="i">
        <legend> <h3>FRUIT DETAILS {{ i + 1 }}:</h3>  </legend>
        <label>Fruit Name: </label>
        <input [formControlName]="name" />
        <label>Fruit Value: </label>
        <input [formControlName]="value" />
      </fieldset>
    </div>
  </div>
  <br />
</form>

<pre>{{ myForm.value | json }}</pre>

关键修正点 #

• 初始化FormArray时，用map将现有数组的每个对象直接转为FormGroup，一步到位，无需先创建空数组再循环push。
• 使用TypeScript getter方法boxArray获取FormArray，避免['controls']这类不规范的访问方式，类型更安全、代码更易维护。
• 移除多余的patchValue调用，因为初始化FormGroup时已经完成值的设置。

如果错误确实和当前代码相关，请检查表单数组名、控件名是否和TS代码完全匹配，确保路径一致。

内容的提问来源于stack exchange，提问作者Vinaykumar K