Angular/TypeScript中如何将FormGroup数据转换为自定义类对象

首先先纠正你现有代码的笔误：你定义FormGroup时重复声明了两次CustAddress控件，还缺失了目标类里的CustName控件，需要先修正，否则会出现字段值覆盖、字段缺失的问题，修正后的FormGroup定义如下：

const group: FormGroup = this._fb.group({
  custNo: this._fb.control(''),
  CustName: this._fb.control(''),
  CustAddress: this._fb.control('test'),
});

最简实现（字段完全匹配场景） #

Angular的FormGroup原生提供getRawValue()方法，可以直接返回所有控件（包括禁用状态控件）的当前值组成的平面对象，只要你的FormGroup字段名和目标类字段名完全一致，直接做类型断言就能用，不需要写额外的遍历转换逻辑：

submit() {
  const customer = this.CustomerGroup.getRawValue() as CustomerClass;
  this.customerservice.processCustomer(customer);
}

这个方案的特点：

• 代码量最少，不需要额外封装
• 相比this.CustomerGroup.value，getRawValue()可以拿到禁用状态控件的值，不会丢数据
• 适合表单字段和目标类字段完全对齐、不需要额外数据处理的简单场景

严谨实现（需要字段过滤/格式处理场景） #

如果需要严格过滤表单里的冗余字段、给字段补默认值、或者做字段格式转换，可以在目标类里加一个静态构造方法，统一处理转换逻辑：

export class CustomerClass{
  custNo?: string;
  CustName?: string;
  CustAddress: string;

  static fromForm(form: FormGroup): CustomerClass {
    const formValue = form.getRawValue();
    const instance = new CustomerClass();
    // 仅赋值目标类声明的字段，自动过滤冗余属性
    instance.custNo = formValue.custNo;
    instance.CustName = formValue.CustName ?? '';
    instance.CustAddress = formValue.CustAddress ?? '';
    return instance;
  }
}

调用时直接用这个静态方法生成实例即可：

submit() {
  const customer = CustomerClass.fromForm(this.CustomerGroup);
  this.customerservice.processCustomer(customer);
}

这个方案的特点：

• 输出的实例严格匹配目标类结构，不会携带多余的表单冗余字段
• 可以在转换层统一处理默认值填充、数据格式转换（比如字符串转数字、日期格式化等）
• 后续类字段变更时，只需要修改这一处转换逻辑，维护成本低

注意：不要直接将FormGroup实例作为参数传入服务方法，FormGroup是Angular封装的表单控制对象，携带大量表单内部的状态、方法属性，哪怕通过TS类型校验，运行时也会导致业务逻辑异常。

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