如何将Angular响应式表单属性仅映射到类/接口成员属性对象？

TypeScript的接口仅存在于编译阶段，运行时无法直接获取接口的属性列表，所以直接用Object.assign会把表单里的所有属性都带过来。以下是几种实用的解决方法：

方法1：手动解构提取（适合属性少的场景） #

直接从表单值中解构出接口定义的属性，再组装成目标对象：

onSubmit() {
  const { a, b } = this.myForm.getRawValue();
  const mynewobject: MyInterface = { a, b };

  console.warn(mynewobject);
}

方法2：通用提取函数（适合多属性或复用场景） #

写一个工具函数，传入目标对象和需要保留的属性键，只提取指定属性：

// 通用提取函数
function pick<T>(obj: any, keys: Array<keyof T>): T {
  const result = {} as T;
  keys.forEach(key => {
    if (obj.hasOwnProperty(key)) {
      result[key] = obj[key];
    }
  });
  return result;
}

// 在提交方法中使用
onSubmit() {
  const mynewobject: MyInterface = pick(this.myForm.getRawValue(), ['a', 'b']);
  console.warn(mynewobject);
}

方法3：基于类的过滤（如果用类替代接口） #

如果把接口改成类（类在运行时存在实例），可以通过类实例的属性列表来过滤：

// 定义类替代接口
export class MyClass {
  a: string | null = null;
  b: number | null = null;
}

// 提交方法中使用
onSubmit() {
  const formValue = this.myForm.getRawValue();
  const mynewobject = new MyClass();
  
  Object.keys(mynewobject).forEach(key => {
    if (formValue.hasOwnProperty(key)) {
      mynewobject[key as keyof MyClass] = formValue[key];
    }
  });

  console.warn(mynewobject);
}

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