Angular响应式表单动态添加输入框无法输入问题求助

开发了一个功能模块，用户选择元素类型后会展示对应的输入框组。功能无报错，但通过*ngFor循环添加的输入框无法输入内容；循环外硬编码的名为“test”的输入框可正常输入。页面能正确渲染输入框和标签，控制台显示formControlName也正确。其中currentNode是formArray中的当前目标项，传入currentNode.controls后，currentControls()会返回包含控件名和标签的数组。

完整模板代码 #

<ng-container formArrayName="nodes">
  <mat-accordion>
    <mat-expansion-panel *ngFor="let currentNode of nodes.controls; let i = index;" [formGroupName]="i">
      <mat-expansion-panel-header>
        <mat-panel-title>
          {{getNodeTitle(i)}}
        </mat-panel-title>
      </mat-expansion-panel-header>
      
      <ng-template matExpansionPanelContent>
        <mat-form-field>
          <mat-label>test</mat-label>
          <input matInput />
        </mat-form-field>

        <mat-form-field *ngFor="let currentControl of currentControls(currentNode.controls)">
          <mat-label>{{currentControl.label}}</mat-label>
          <input matInput [formControlName]="currentControl.control" />
        </mat-form-field>
      </ng-template>

    </mat-expansion-panel>
  </mat-accordion>
</ng-container>

解决方法 #

1. 避免模板中直接调用返回新数组的方法 #

如果currentControls()每次调用都生成新数组对象，会触发Angular频繁重渲染，导致输入框失去绑定状态。

方案A：缓存计算结果

在组件类中添加属性存储计算后的控件列表，当currentNode变化时更新：

// 组件类中
currentControlList: {control: string, label: string}[] = [];

// 当currentNode变更时（比如节点切换、元素类型选择后）
updateControlList(currentNode: FormGroup) {
  this.currentControlList = this.currentControls(currentNode.controls);
}

模板修改为：

<mat-form-field *ngFor="let currentControl of currentControlList">
  <!-- 原有输入框内容 -->
</mat-form-field>

方案B：添加trackBy函数

在组件类中定义trackBy函数，帮助Angular识别数组项的唯一性：

trackByControlName(index: number, item: any): string {
  return item.control; // 用控件名作为唯一标识
}

模板修改*ngFor：

<mat-form-field *ngFor="let currentControl of currentControls(currentNode.controls); trackBy: trackByControlName">
  <!-- 原有输入框内容 -->
</mat-form-field>

2. 验证表单控件关联性 #

确认currentControls()返回的control字段是currentNode（FormGroup）中已存在的控件名称，且该控件已被正确初始化到FormGroup中。可以在组件中打印对比：

console.log('FormGroup控件:', currentNode.controls);
console.log('currentControls返回:', this.currentControls(currentNode.controls));

3. 确保表单上下文正确 #

尝试将formGroupName绑定移到展开面板内容的容器中，避免上下文丢失：

<ng-template matExpansionPanelContent>
  <div [formGroupName]="i">
    <mat-form-field>
      <mat-label>test</mat-label>
      <input matInput />
    </mat-form-field>

    <mat-form-field *ngFor="let currentControl of currentControls(currentNode.controls); trackBy: trackByControlName">
      <mat-label>{{currentControl.label}}</mat-label>
      <input matInput [formControlName]="currentControl.control" />
    </mat-form-field>
  </div>
</ng-template>

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