如何为FormBuilder创建的FormGroups添加类型与标签，实现动态Mat Table

你不需要强行扩展FormGroup的创建逻辑，Angular的FormBuilder并不支持直接在控件配置中添加自定义的type和label字段，但可以通过分离元数据配置的方式，同时实现表单构建和表格列的动态渲染，步骤如下：

1. 定义统一的列元数据配置 #

先创建一个包含所有列信息的数组，把表单验证器、列标签、输入类型和字段key绑定在一起：

// 可选：定义列配置类型，提供TypeScript类型提示
interface ColumnConfig {
  key: string;
  label: string;
  type: 'text' | 'date' | 'number';
  validators: ValidatorFn[];
}

// 具体列配置
columnConfigs: ColumnConfig[] = [
  {
    key: 'name',
    label: 'Name',
    type: 'text',
    validators: [Validators.required]
  },
  {
    key: 'date',
    label: 'Date',
    type: 'date',
    validators: [Validators.required]
  },
  {
    key: 'units',
    label: 'Number of Units',
    type: 'number',
    validators: [Validators.required]
  }
];

2. 用配置数组构建FormGroup #

遍历配置数组，动态生成表单控件：

this.myForm = this._formBuilder.group({});

this.columnConfigs.forEach(config => {
  this.myForm.addControl(
    config.key,
    this._formBuilder.control('', config.validators)
  );
});

3. 动态渲染Mat Table的列与可编辑单元格 #

直接用columnConfigs作为表格的数据源，在模板中动态生成列定义、表头和对应类型的可编辑输入框：

<!-- 列定义 -->
<ng-container *ngFor="let config of columnConfigs" [matColumnDef]="config.key">
  <!-- 表头单元格 -->
  <th mat-header-cell *matHeaderCellDef>{{ config.label }}</th>
  <!-- 可编辑数据单元格 -->
  <td mat-cell *matCellDef="let element">
    <input 
      [type]="config.type"
      [formControl]="myForm.get(config.key)"
      class="form-control"
    >
  </td>
</ng-container>

<!-- 表格结构 -->
<tr mat-header-row *matHeaderRowDef="columnConfigs.map(c => c.key)"></tr>
<tr mat-row *matRowDef="let row; columns: columnConfigs.map(c => c.key)"></tr>

为什么不直接扩展FormGroup？ #

Angular的FormControl构造函数参数中没有预留自定义字段的位置，强行在配置中添加type/label属于不符合API规范的写法，不仅会触发类型错误，还会让表单逻辑与UI渲染耦合在一起。分离元数据的方式既保持了表单逻辑的纯净，又能灵活控制表格渲染，后续修改列信息只需更新配置数组即可，维护成本更低。

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