如何高效将NgForm值映射到Angular的TypeScript模型？

我需要将NgForm中的值高效映射到Angular组件定义的TypeScript模型中。表单值来自PrimeNG的p-table（支持动态行数），返回的JSON对象里每个表单控件名末尾都追加了行索引（格式为字段名-rowIndex）。

示例输入JSON #

{"controlA-0" : 123, "controlB-0" : 456, "controlC-0" : 789,
"controlA-1" : 321, "controlB-1" : 654, "controlC-1" : 987,
"controlA-2" : 213, "controlB-2" : 564, "controlC-2" : 897
}

实际NgForm值（夏威夷州4个县为例） #

{
    "AreaOfOperationId-0": 0,
    "StateCountyLookupID-0": 544,
    "StateId-0": "12",
    "StateCode-0": "HI",
    "StateDisplayName-0": "Hawaii",
    "CountyId-0": "711",
    "CountyDisplayName-0": "Hawaii",
    "county-primary-0": true,
    "county-secondary-0": false,
    "county-na-0": false,
    "AreaOfOperationId-1": 0,
    "StateCountyLookupID-1": 545,
    "StateId-1": "12",
    "StateCode-1": "HI",
    "StateDisplayName-1": "Hawaii",
    "CountyId-1": "743",
    "CountyDisplayName-1": "Honolulu",
    "county-primary-1": false,
    "county-secondary-1": true,
    "county-na-1": false,
    "AreaOfOperationId-2": 0,
    "StateCountyLookupID-2": 546,
    "StateId-2": "12",
    "StateCode-2": "HI",
    "StateDisplayName-2": "Hawaii",
    "CountyId-2": "826",
    "CountyDisplayName-2": "Kauai",
    "county-primary-2": true,
    "county-secondary-2": false,
    "county-na-2": false,
    "AreaOfOperationId-3": 0,
    "StateCountyLookupID-3": 547,
    "StateId-3": "12",
    "StateCode-3": "HI",
    "StateDisplayName-3": "Hawaii",
    "CountyId-3": "996",
    "CountyDisplayName-3": "Maui",
    "county-primary-3": false,
    "county-secondary-3": false,
    "county-na-3": true
}

目标TypeScript模型 #

interface OperationalArea {
  AreaOfOperationId: number;
  StateCountyLookupID: number;
  State: {
    Id: string;
    Code: string;
    DisplayName: string;
  };
  County: {
    Id: string;
    DisplayName: string;
  };
  'county-primary': boolean;
  'county-secondary': boolean;
  'county-na': boolean;
}

之前的尝试（无效） #

我曾尝试直接遍历控件，但输出格式不符合API要求：

Object.values(newOperationalAreaForm.controls).forEach(ctl => {
  console.log(ctl);
});

解决方案 #

通过按行索引分组字段，再组装成目标模型结构，代码如下：

// 获取表单原始值
const formValues = this.newOperationalAreaForm.value;

// 按行索引分组存储临时数据
const groupedRows: { [index: string]: Partial<OperationalArea> } = {};

// 遍历所有表单字段
Object.entries(formValues).forEach(([fullKey, value]) => {
  // 拆分字段名和行索引
  const [fieldName, indexStr] = fullKey.split('-');
  const rowIndex = indexStr;

  // 初始化当前行的对象
  if (!groupedRows[rowIndex]) {
    groupedRows[rowIndex] = {
      State: {},
      County: {}
    };
  }

  const currentRow = groupedRows[rowIndex];

  // 处理State相关字段（StateId -> State.Id）
  if (fieldName.startsWith('State')) {
    const stateProp = fieldName.replace('State', '');
    currentRow.State![stateProp.charAt(0).toLowerCase() + stateProp.slice(1)] = value;
  }
  // 处理County相关字段
  else if (fieldName.startsWith('County')) {
    const countyProp = fieldName.replace('County', '');
    // 区分County的子属性和状态字段
    if (['primary', 'secondary', 'na'].includes(countyProp)) {
      currentRow[`county-${countyProp}` as keyof OperationalArea] = value as boolean;
    } else {
      currentRow.County![countyProp.charAt(0).toLowerCase() + countyProp.slice(1)] = value;
    }
  }
  // 处理顶层字段
  else {
    currentRow[fieldName as keyof OperationalArea] = value as any;
  }
});

// 转换为API需要的数组格式
const areaOfOperation: OperationalArea[] = Object.values(groupedRows) as OperationalArea[];

// 最终提交给API的对象
const submitData = {
  AreaOfOperation: areaOfOperation
};

代码逻辑说明 #

1. 分组字段：通过拆分字段名中的行索引，将同一行的字段值归类到同一个对象中
2. 字段映射：
   • State开头的字段：提取子属性名并转为小写开头，存入State对象
   • County开头的字段：区分是County的基础属性（Id/DisplayName）还是状态字段（primary/secondary/na），分别存入对应位置
   • 其他字段直接赋值到顶层
3. 格式转换：将分组后的对象转为数组，得到API要求的提交格式

这种方式可以动态适配任意行数的表单，后续字段变动时只需调整字段映射逻辑即可。

内容的提问来源于stack exchange，提问作者Jeff O'Connell