Angular响应式表单编辑时空输入返回null覆盖原有数据的解决方案问询

注意：你示例代码中存在一处小问题，表单初始化时声明的控件名是prop1/prop2，但取值时用this.form.get('input1')是拿不到对应值的，需要保持控件名一致。

比for...in循环更简洁，同时避免了for...in可能遍历到原型链属性的问题，还可以自定义需要过滤的空值类型，直接通过this.form.value获取全量表单值即可，无需单独遍历控件：

// 可以根据业务需求调整过滤条件，示例仅过滤空字符串、null、undefined，保留0、false等合法假值
const dict = Object.entries(this.form.value).reduce((acc, [key, value]) => {
  if (value !== '' && value != null) {
    acc[key] = value
  }
  return acc
}, {})

如果后端接口支持，更新操作优先使用PATCH请求而非PUT请求：

• PUT的语义是整体替换资源，要求传递全量字段，空值覆盖原有值完全符合其设计语义
• PATCH的语义是部分更新资源，仅需传递需要修改的字段，后端会保留未传递字段的原有值，天然适配你需要修改部分字段的场景

如果多业务场景都需要类似的空值过滤，可以把逻辑抽成公用方法，避免重复编码：

// 通用表单值过滤工具，支持泛型自动推导类型
function filterEmptyFormValues<T extends Record<string, any>>(formValue: T): Partial<T> {
  return Object.entries(formValue).reduce((acc, [key, value]) => {
    // 可根据业务调整过滤规则，比如需要过滤全空格输入可以加trim判断
    const isNotEmpty = value !== '' 
      && value != null 
      && (typeof value !== 'string' || value.trim() !== '')
    if (isNotEmpty) {
      acc[key as keyof T] = value
    }
    return acc
  }, {} as Partial<T>)
}

// 使用时直接调用即可
const dict = filterEmptyFormValues(this.form.value)

如果希望空输入自动转换为undefined而非空字符串，可以在初始化表单时添加自定义解析器，或者绑定输入框的input事件处理，后续过滤时直接排除undefined即可，适合需要统一处理全项目表单的场景。

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