如何在Angular响应式表单中动态渲染FormGroup数据？

1. 修正动态数据转表单结构的逻辑 #

确保外部数据被正确转换为Angular表单控件结构，每个层级都创建对应的FormGroup/FormArray，避免因控件未初始化导致渲染报错：

addProjects() {
  // 外部数据源示例
  const externalData = [
    {
      projectName: 'Project A',
      tables: [
        {
          tableName: 'Table 1',
          columns: [
            { name: 'Column 1', min: 0, max: 100 },
            { name: 'Column 2', min: 10, max: 200 }
          ]
        }
      ]
    }
  ];

  externalData.forEach(project => {
    // 创建项目FormGroup
    const projectGroup = this.fb.group({
      projectName: project.projectName,
      tables: this.fb.array([])
    });

    const tablesArray = projectGroup.get('tables') as FormArray;
    project.tables.forEach(table => {
      // 创建表格FormGroup
      const tableGroup = this.fb.group({
        tableName: table.tableName,
        columns: this.fb.array([])
      });

      const columnsArray = tableGroup.get('columns') as FormArray;
      table.columns.forEach(column => {
        // 为每个字段创建包含min、max的FormGroup
        columnsArray.push(this.fb.group({
          name: column.name,
          min: column.min ?? '',
          max: column.max ?? ''
        }));
      });

      tablesArray.push(tableGroup);
    });

    this.projects.push(projectGroup);
  });
}

2. 模板中正确绑定表单控件 #

通过嵌套的formArrayName和formGroupName定位到目标控件，使用formControlName直接绑定min/max输入框：

<form [formGroup]="projectForm">
  <div formArrayName="projects">
    <div *ngFor="let project of projects.controls; let i = index" [formGroupName]="i">
      <h3>{{ project.get('projectName')?.value }}</h3>
      <div formArrayName="tables">
        <div *ngFor="let table of project.get('tables')?.controls; let j = index" [formGroupName]="j">
          <h4>{{ table.get('tableName')?.value }}</h4>
          <table border="1">
            <thead>
              <tr>
                <th>Column Name</th>
                <th>Min</th>
                <th>Max</th>
              </tr>
            </thead>
            <tbody formArrayName="columns">
              <tr *ngFor="let column of table.get('columns')?.controls; let k = index" [formGroupName]="k">
                <td>{{ column.get('name')?.value }}</td>
                <td><input type="number" formControlName="min"></td>
                <td><input type="number" formControlName="max"></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</form>

<button (click)="addProjects()">Render Project Tables</button>

3. 基础表单初始化 #

组件类中完成表单的初始结构搭建：

projectForm: FormGroup;

// 快捷获取projects数组控件
get projects() {
  return this.projectForm.get('projects') as FormArray;
}

constructor(private fb: FormBuilder) {
  this.projectForm = this.fb.group({
    projects: this.fb.array([])
  });
}

上述修改后，点击按钮添加数据时，min和max会被正确绑定为可编辑输入框，同时解决渲染时的报错问题。

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