如何修复Angular响应式表单错误：Cannot find control with path

使用Angular响应式表单并设置初始值后，输入框无法绑定，报错：Cannot find control with path: 'array-> group -> name'。以下是原HTML和TS代码，请求排查：

原HTML代码 #

<div [formGroup]="secondFormGroup" class="steper_ctform">

    <div class="steper_sstitle">Añadir Artículo</div>

    <mat-form-field appearance="outline" class="steper_artsrh">
        <mat-label>Buscar Producto</mat-label>
        <input matInput placeholder="Ej.  151FGD " class="steper_inp_as">
    </mat-form-field>
    <button (click)="addSfdynamic()">Añadir Componente</button>

    <ng-container formArrayName="articulos">
        <div *ngFor="let art of artarray.controls; let i = index">
            <ng-container [formGroupName]="i">
                <div class="sf_ctart">
                    <div [attr.for]="'art' + i">{{art.value.id}}</div>
                    <div>{{art.value.nart}}</div>
                    <input type="text" formControlName='am'>
                    <button (click)="eraseArt(i)">B</button>
                </div>
            </ng-container>

        </div>
    </ng-container>

</div>

原TS代码 #

secondFormGroup = this._formBuilder.group({

  articulos: this._formBuilder.array([
    {
      id:"1",
      nart: "T",
      am: 0,
    },
    {
      id:"2",
      nart: "T",
      am: 1,
    },
    {
      id:"3",
      nart: "M",
      am: 0,
    },      
  ]),

});

public get artarray(): FormArray {
  return this.secondFormGroup.get('articulos') as FormArray
}

问题根源 #

创建FormArray时直接传入了普通对象数组，但Angular的FormArray要求每一项必须是FormControl、FormGroup或FormArray类型，普通对象不会被自动转换为FormGroup，导致表单控件路径无法识别，从而抛出错误。

修正后的TS代码 #

secondFormGroup = this._formBuilder.group({
  articulos: this._formBuilder.array([
    // 每个元素用_formBuilder.group包裹，转为FormGroup
    this._formBuilder.group({
      id:"1",
      nart: "T",
      am: 0,
    }),
    this._formBuilder.group({
      id:"2",
      nart: "T",
      am: 1,
    }),
    this._formBuilder.group({
      id:"3",
      nart: "M",
      am: 0,
    }),      
  ]),
});

public get artarray(): FormArray {
  return this.secondFormGroup.get('articulos') as FormArray
}

// 补充addSfdynamic方法的正确实现（动态添加组件用）
addSfdynamic() {
  this.artarray.push(
    this._formBuilder.group({
      id:"",
      nart: "",
      am: 0,
    })
  );
}

// eraseArt方法实现
eraseArt(index: number) {
  this.artarray.removeAt(index);
}

说明 #

• 将FormArray中的每个普通对象通过this._formBuilder.group()包装为FormGroup，Angular才能识别表单控件路径，完成输入框绑定。
• 动态添加组件时，addSfdynamic方法也要用_formBuilder.group创建新表单组再推入数组。

内容的提问来源于stack exchange，提问作者Tico-Diego