ngx-formly表单form.value含多余空数组，如何获取目标数据结构

需求 #

期望form.value输出如下结构：

[
  {
    "investment_name": [
      "Investment 1",
      "Investment 2",
      "Investment 3"
    ]
  },
  {
    "investor_name": [
      "John",
      "Tom",
      "Tim"
    ]
  }
]

当前配置与问题 #

现有fields配置：

fields: FormlyFieldConfig[] = [
  {
    key: 'main',
    type: 'repeat',
    fieldArray: {
      fieldGroupClassName: 'row',
      fieldGroup: [
        {
          key: 'text',
          type: 'input-repeat',
        },
        {
          key: 'name',
          type: 'input-repeat',
        },
      ],
    },
  },
];

当前获取的form.value存在两个问题：

• 包含多余的空数组字段（如name: []、text: []）
• 被嵌套在main键下，不符合期望结构

解决方案 #

1. 移除"main"根键 #

将repeat字段直接作为根字段，不再嵌套到main中，同时把字段key替换为期望的名称：

fields: FormlyFieldConfig[] = [
  {
    type: 'repeat',
    fieldArray: {
      fieldGroupClassName: 'row',
      fieldGroup: [
        {
          key: 'investment_name',
          type: 'input-repeat',
        },
        {
          key: 'investor_name',
          type: 'input-repeat',
        },
      ],
    },
  },
];

2. 清理空数组字段 #

有两种实用方式处理空数组：

方式一：提交时手动过滤

在获取表单值后，直接过滤掉空数组字段：

getFormattedValue() {
  const rawValue = this.form.value;
  return rawValue.map(item => {
    const cleanedItem = {};
    Object.keys(item).forEach(key => {
      if (item[key].length > 0) {
        cleanedItem[key] = item[key];
      }
    });
    return cleanedItem;
  });
}

调用该方法即可得到符合要求的最终值。

方式二：利用Formly钩子自动清理

在字段配置中添加postWriters钩子，在值更新时自动移除空数组字段：

fields: FormlyFieldConfig[] = [
  {
    type: 'repeat',
    fieldArray: {
      fieldGroupClassName: 'row',
      fieldGroup: [
        {
          key: 'investment_name',
          type: 'input-repeat',
          postWriters: [(field, value) => {
            if (value.length === 0) {
              delete field.formControl.parent.value[field.key];
            }
          }],
        },
        {
          key: 'investor_name',
          type: 'input-repeat',
          postWriters: [(field, value) => {
            if (value.length === 0) {
              delete field.formControl.parent.value[field.key];
            }
          }],
        },
      ],
    },
  },
];

最终效果 #

经过以上修改后，表单值会直接输出为期望的数组结构，且不会包含空数组字段。

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