Angular中如何获取表单值并生成带多属性的对应对象数组

第一步：先修正现有代码的两处问题 #

1. 动态创建表单的forEach循环未取索引值，会导致required+i的i为undefined报错
2. 你HTML中使用了formName控件，需要提前加入表单组，否则会报控件不存在的错误

修正后的创建表单代码：

import { Validators } from '@angular/forms';

// ...其他代码省略
createFormgroup() {
  // 从forEach第二个参数拿到当前遍历的索引i
  arr.forEach((control: any, i: number) => {
    this.createFormGroup.addControl(
      control.name,
      this.fb.control(false)
    );
    this.createFormGroup.addControl(
      `required${i}`,
      this.fb.control(false)
    );
  });
  // 补充加入formName控件，对应HTML里的输入框
  this.createFormGroup.addControl('formName', this.fb.control('', Validators.required));
}

第二步：修改submit方法，生成要求的结构 #

核心逻辑是以原始数组为基准遍历，保证保留type等原有属性，再用表单的勾选状态过滤、更新required属性即可：

// 注意入参是FormGroup类型，你之前写的NgForm是模板驱动表单的类型，这里是响应式表单要改对
submit(form: FormGroup) {
  const formVal = form.value;
  const result = [];

  this.arr.forEach((originItem, index) => {
    // 先判断当前字段是否被用户勾选
    const isFieldSelected = formVal[originItem.name];
    if (isFieldSelected) {
      // 克隆原始对象，避免修改原始数组数据
      const newItem = {...originItem};
      // 用用户勾选的required状态覆盖原有值
      newItem.required = formVal[`required${index}`];
      result.push(newItem);
    }
  });

  // 这里的result就是你要求的结构，可直接打印或提交
  console.log('提交结果', result);
  // 如果需要同时返回formName，可按如下格式输出：
  // console.log({ formName: formVal.formName, fields: result });
}

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