Angular中用ng-template拆分响应式表单？解决控件找不到报错

错误原因分析 #

报错Error: Cannot find control with name: '0'的核心问题：

• 误用了不存在的指令formArray，正确绑定FormArray的指令是formArrayName，且需绑定表单组内的字段名称字符串，而非直接传递FormArray实例。
• 输入框未绑定formControlName，导致表单控件与输入元素无关联，Angular无法识别循环生成的表单组控件。

修正方案 #

1. 调整模板绑定逻辑 #

• 在ngTemplateOutletContext中同时传递表单组、FormArray实例和对应的字段名称字符串。
• 替换错误的formArray指令为formArrayName，并绑定字段名称。
• 给输入框添加formControlName关联到表单组内的具体控件。

2. 修正后的完整代码 #

模板部分

<h1>Test Reactive Form</h1>
<form [formGroup]="form">
  <ng-container
    [ngTemplateOutlet]="formArray"
    [ngTemplateOutletContext]="{formGroup: form, array: test, arrayName: 'test'}"
  ></ng-container>
</form> 
{{form.value | json}}

<ng-template #formArray let-formGroup="formGroup" let-array="array" let-arrayName="arrayName">
  <ng-container [formGroup]="formGroup">
    <div [formArrayName]="arrayName">
      <ng-container *ngFor="let group of array.controls; let i = index" [formGroupName]="i">
        <input type="text" formControlName="name" />
      </ng-container>
    </div>
  </ng-container>
</ng-template>

组件类部分

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
})
export class AppComponent {
  name = 'Angular';
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      test: this.fb.array([]),
    });

    const testGroup = this.fb.group({
      name: 'Test name',
    });
    this.test.push(testGroup);
    const testGroup_1 = this.fb.group({
      name: 'test name 2',
    });
    this.test.push(testGroup_1);
  }

  get test(): FormArray {
    return this.form.get('test') as FormArray;
  }
}

关键修正点说明 #

• FormArray绑定：使用[formArrayName]="arrayName"绑定表单组内的字段名称，Angular需要通过字段名定位到对应的FormArray控件，而非直接传入实例。
• 控件关联：输入框通过formControlName="name"关联到每个表单组内的name控件，确保表单数据双向绑定生效。
• 模板上下文传递：同时传递FormArray实例和字段名，既方便循环遍历控件，又能正确绑定表单指令。

内容的提问来源于stack exchange，提问作者Abhisek Malakar