Angular模板驱动表单无ngModel时如何实现动态表格数据保存

不需要预先定义包含上百个固定属性的Model类，也不是必须依赖固定Model配合ngModel才能实现保存功能，针对动态列场景可以直接用通用动态结构适配，以下是可直接落地的实现方式：

核心误区澄清 #

Angular的脏值检测、表单绑定能力不依赖预定义的固定数据模型：不管是模板驱动表单还是响应式表单，都支持对对象动态属性的绑定，只要属性存在于绑定的对象上，值变更就能被正常捕获，完全不需要为每个动态列提前写死属性。

方案1：复用现有数据结构做轻量双向绑定（改动最小） #

你当前代码里的groupDataInfo本身已经是适配动态列的结构：每一行的solverParameterData数组存储了列唯一标识attributeUrn和对应值value，直接基于这个结构做绑定即可，不需要额外建固定Model。

1. 先定义通用动态类型（不需要写固定列属性，全场景通用）：

   // 动态列参数类型，不管15列还是上百列都适配
   interface DynamicParam {
     attributeUrn: string;
     value: string | number | boolean;
     [key: string]: any; // 兼容接口返回的其他字段
   }
   // 动态表格行类型
   interface DynamicTableRow {
     entityName: string;
     solverParameterData: DynamicParam[];
   }
   

2. 调整模板输入框绑定，替换原来的静态value插值，加上唯一标识做双向绑定：

   <table class="tableInfo">
       <thead *ngIf="parameterModels?.length > 0">
           <tr>
               <th class="tableheaders" *ngFor="let paramType of demoheader; let i = index">
                   {{paramType}}
               </th>               
           </tr>
       </thead>
       <tbody>
           <tr *ngFor="let paramTypes of groupDataInfo; let i = index">
               <td>
                   <div class="tabledataEquipmentNameInfo">
                       <!-- 设备名禁用保持原有逻辑，id/name改动态避免重复 -->
                       <input 
                         id="entity_{{i}}_name" 
                         type="text" 
                         name="entity_{{i}}_name" 
                         [value]="paramTypes.entityName" 
                         class="form-control" 
                         disabled>
                   </div>
               </td>
               <td *ngFor="let paramType of paramTypes.solverParameterData; let ii = index">
                   <div class="tabledataEquipmentNameInfo">
                       <!-- 可编辑列直接绑定paramType.value，name加列唯一标识避免冲突 -->
                       <input 
                         id="row_{{i}}_col_{{paramType.attributeUrn}}" 
                         type="text" 
                         name="row_{{i}}_col_{{paramType.attributeUrn}}" 
                         [(ngModel)]="paramType.value"
                         class="form-control">
                   </div>
               </td>
           </tr>
       </tbody>
   </table>
   

3. 提交时直接遍历现有数据结构组装参数即可，不需要额外做DOM查询采集值：

   async onSubmit() {
     const submitData = this.groupDataInfo.map(row => {
       const rowValues: Record<string, any> = {
         entityName: row.entityName
       };
       // 遍历动态列，用attributeUrn作为字段key，直接取用户编辑后的value
       row.solverParameterData.forEach(param => {
         rowValues[param.attributeUrn] = param.value;
       });
       return rowValues;
     });
     // 调用接口提交到数据库
     await this.parameterService.saveEquipmentData(submitData).toPromise();
   }
   

方案2：动态响应式表单（适合列数多、需要校验的场景） #

如果动态列数达到上百级别、需要做字段校验（必填、数值格式等），推荐用Angular响应式表单动态生成控件，性能和可控性更好，同样不需要固定Model：

1. 引入响应式表单模块，在拿到表格数据后动态构建表单：

   import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
   tableForm: FormGroup;
   
   // 构造函数注入private fb: FormBuilder
   
   // 在获取到groupDataInfo的逻辑末尾调用，生成动态表单
   buildDynamicTableForm() {
     const rowFormGroups = this.groupDataInfo.map(row => {
       const rowGroup = this.fb.group({
         entityName: [row.entityName]
       });
       // 遍历每个动态列，动态添加表单控件
       row.solverParameterData.forEach(param => {
         // 可以按需加校验器，比如Validators.required、Validators.pattern等
         rowGroup.addControl(param.attributeUrn, this.fb.control(param.value));
       });
       return rowGroup;
     });
   
     this.tableForm = this.fb.group({
       rows: this.fb.array(rowFormGroups)
     });
   }
   

2. 模板绑定动态表单，提交时直接取表单值即可：

   <form [formGroup]="tableForm" (ngSubmit)="onSubmit()">
     <table class="tableInfo">
       <!-- 表头逻辑保持不变 -->
       <tbody formArrayName="rows">
           <tr *ngFor="let rowGroup of tableForm.get('rows')['controls']; let i = index" [formGroup]="rowGroup">
               <td>
                   <div class="tabledataEquipmentNameInfo">
                       <input 
                         type="text" 
                         formControlName="entityName"
                         class="form-control" 
                         disabled>
                   </div>
               </td>
               <td *ngFor="let paramType of groupDataInfo[i].solverParameterData; let ii = index">
                   <div class="tabledataEquipmentNameInfo">
                       <input 
                         type="text" 
                         [formControlName]="paramType.attributeUrn"
                         class="form-control">
                   </div>
               </td>
           </tr>
       </tbody>
     </table>
     <button type="submit">保存</button>
   </form>
   

3. 提交逻辑非常简单，直接拿表单的原生值即可：

   async onSubmit() {
     if (this.tableForm.invalid) return;
     const submitData = this.tableForm.value.rows;
     await this.parameterService.saveEquipmentData(submitData).toPromise();
   }
   

现有代码优化提示 #

• 目前模板里所有输入框都写了相同的id="entityName"，不符合HTML规范，按上面示例改成动态id即可
• 现有逻辑里维护的demoheader、demoValue、solverData属于冗余变量，表头可以直接从第一行数据的solverParameterData里提取attributeUrn生成，不需要额外转存Map再转数组，减少数据同步成本

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