Angular中如何在HTML模板访问FormBuilder数据渲染表格

核心错误点 #

• TS层初始化错误：operations字段未被正确初始化为 FormArray 类型，直接将数组作为单个表单控件值存储，导致模板访问controls属性时拿到空值，内层循环无法执行。
• HTML结构违规：<form>标签直接嵌套在<table>内部，不符合HTML table元素嵌套规则，浏览器会自动重排DOM，导致响应式表单指令绑定上下文断裂。
• 模板指令绑定错误：formArrayName、formGroupName指令的绑定位置和层级错误，未按响应式表单的嵌套结构逐层绑定上下文。

修复代码 #

1. 修正TS层表单初始化逻辑 #

generateTable(dataJobs: any): void {
  // 直接初始化jobs为空FormArray，省略先加默认项再删除的冗余逻辑
  this.formBuilder = this.fb.group({
    jobs: this.fb.array([])
  });

  const jobsArray = this.jobs;
  for (const jobItem of dataJobs) {
    // 每个job对应一个FormGroup，operations必须初始化为FormArray，每个工序转为独立FormControl
    jobsArray.push(
      this.fb.group({
        name: this.fb.control(jobItem.name),
        operations: this.fb.array(
          jobItem.operations.map(op => this.fb.control(op))
        )
      })
    );
  }
}

get jobs(): FormArray {
  return this.formBuilder.get('jobs') as FormArray;
}

2. 修正模板结构与指令绑定 #

<!-- form标签移到table外层，保证DOM结构合法，表单上下文完整 -->
<form [formGroup]="formBuilder">
  <table>
    <thead>
      <tr class="fw-bolder fs-6 text-gray-800">
        <th>#</th>
        <th>Job名称</th>
        <th>工序1</th>
        <th>工序2</th>
      </tr>
    </thead>
    <!-- 先绑定jobs的FormArray上下文到tbody -->
    <tbody formArrayName="jobs">
      <!-- 循环jobs的控件，给每一行绑定对应索引的FormGroup上下文 -->
      <tr *ngFor="let job of jobs.controls; let i = index" [formGroupName]="i">
        <td>{{ i + 1 }}</td>
        <td>{{ job.get('name').value }}</td>
        <!-- 绑定当前行下operations的FormArray上下文 -->
        <ng-container formArrayName="operations">
          <!-- 循环工序控件，取值需要访问FormControl的value属性 -->
          <td *ngFor="let op of job.get('operations').controls; let ind = index">
            {{ op.value }}
          </td>
        </ng-container>
      </tr>
    </tbody>
  </table>
</form>

补充：如果不同job下的工序数量不固定，可以提前计算所有job的最大工序数，动态生成表头列，避免列数和数据不匹配。

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