如何将响应式表单数组中的字段转换为独立对象

嘿，这个需求在处理表单数据时挺常见的，我来给你一步步说明怎么实现：

首先要明确，你从响应式表单拿到的其实是一个键值对对象（不是数组哦，你描述里的写法更像对象的键值集合），我们可以用JavaScript/TypeScript的内置方法快速转换：

核心代码实现 #

// 假设这是你从表单获取的原始数据对象
const formData = {
  ADVERSE_POSESSION: "",
  PRIMARY_RESIDENCE: "Yes",
  SUBJECT_TO_TENANCY: "Tenancy"
};

// 转换为你需要的数组结构
const transformedArray = Object.entries(formData).map(([fieldId, value]) => ({
  fieldId,
  value
}));

// 输出结果就是你想要的格式
console.log(transformedArray);

代码解释 #

1. Object.entries()：这个方法会把对象转换成一个包含键值对的二维数组，比如上面的formData会被转成：

   [
     ["ADVERSE_POSESSION", ""],
     ["PRIMARY_RESIDENCE", "Yes"],
     ["SUBJECT_TO_TENANCY", "Tenancy"]
   ]
   

2. map()方法：遍历这个二维数组，用解构赋值[fieldId, value]直接提取每个项的键和值，然后返回一个新的对象，正好匹配你要的{ fieldId: "...", value: "..." }结构。

Angular响应式表单场景适配 #

如果是在Angular里处理响应式表单，你可以直接从表单实例的value属性拿到数据，再用同样的逻辑处理：

// 假设你的响应式表单实例是this.propertyForm
const formValue = this.propertyForm.value;
const transformedArray = Object.entries(formValue).map(([fieldId, value]) => ({
  fieldId,
  value
}));

这样就能得到你期望的数组结构啦！

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