Angular中如何将FormArray数据赋值给User对象的Address属性？

首先你的代码里存在两个核心问题：

1. 类型不匹配：User 接口中 address 定义为单个 MyAddress 类型，但表单用 FormArray 存储多地址数据，两者类型冲突。
2. 代码错误：myForm 中没有 description 控件，应该取 age；且 TypeScript 接口不能用 new 关键字实例化。

步骤1：修正 User 接口 #

将 address 改为数组类型，适配多地址场景：

// User.ts
export interface User {
  id?: number;
  name: string;
  age: number;
  addresses: MyAddress[]; // 改为数组类型，命名为复数更贴合语义
}

步骤2：修复 setDetail 方法 #

调整代码逻辑，正确从 FormArray 中取值并赋值给 User 对象：

// component.ts
setDetail(): User {
    // 获取基础表单值，将age转换为数字类型
    const name = this.myForm.controls.name.getRawValue();
    const ageRaw = this.myForm.controls.age.getRawValue();
    const age = isNaN(Number(ageRaw)) ? 0 : Number(ageRaw);

    // 获取FormArray中的所有地址数据
    const addressArray = this.myFormAddress.get('address') as FormArray;
    const addresses = addressArray.getRawValue();

    // 用对象字面量创建User实例（接口不能用new实例化）
    return {
      name,
      age,
      addresses
    };
  }

关键说明 #

• 类型断言：this.myFormAddress.get('address') as FormArray 是因为 get() 方法默认返回 AbstractControl，需要断言为 FormArray 才能调用数组相关方法。
• getRawValue()：该方法会直接返回表单数组中所有控件的原始值，自动组成与 MyAddress[] 匹配的数组结构，无需手动遍历每个表单控件取值。
• 接口使用：TypeScript 接口仅做类型约束，不能通过 new 关键字创建实例，直接用对象字面量即可满足类型要求。

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