Angular Reactive Forms 提交时如何排除嵌套结构中的null空值字段

解决方案 #

你可以通过递归函数实现全层级的null值过滤，逻辑会自动遍历所有嵌套对象，仅保留非null的字段，同时会自动移除清理后完全为空的嵌套分组：

1. 定义递归清理函数

function cleanNullValues(obj: any): any {
  // 空值直接返回null
  if (obj === null || obj === undefined) return null;
  // 非对象类型（基础值）直接返回原值
  if (typeof obj !== 'object') return obj;

  const cleanedResult = {};
  for (const key of Object.keys(obj)) {
    const processedValue = cleanNullValues(obj[key]);
    // 仅保留处理后非空的值
    if (processedValue !== null) {
      cleanedResult[key] = processedValue;
    }
  }
  // 如果当前对象处理后为空，返回null让上层也移除该键
  return Object.keys(cleanedResult).length === 0 ? null : cleanedResult;
}

2. 表单提交时调用

// 先获取表单原始值
const rawFormValue = this.newMeasurementForm.value;
// 过滤所有空值
const submittedValue = cleanNullValues(rawFormValue);
// 后续直接提交submittedValue即可

逻辑说明

• 支持任意层级的嵌套对象过滤，完全适配你现有的嵌套FormGroup结构
• 如果某一个嵌套FormGroup下所有字段都是null，该分组的键会自动从最终结果中移除，避免提交空对象
• 若你的表单后续新增FormArray类型字段，只需在函数中补充数组类型的判断逻辑即可兼容

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