Angular中如何将FormArray数据赋值给User对象？求助

首先明确接口结构（如果和你的实际定义有出入，调整对应字段即可）：

// MyAddress接口
interface MyAddress {
  street: string;
  city: string;
  zipCode: string;
  // 其他地址相关字段，比如id、province等
}

// User接口
interface User {
  name: string;
  email: string;
  myAddress: MyAddress[];
}

假设你的组件表单定义如下（包含存储地址的FormArray）：

import { FormBuilder, FormGroup, FormArray } from '@angular/forms';

@Component({
  // 组件元数据
})
export class YourComponent {
  userForm: FormGroup;
  myObj: User = { name: '', email: '', myAddress: [] }; // 目标赋值对象

  constructor(private fb: FormBuilder) {
    // 初始化表单
    this.userForm = this.fb.group({
      name: [''],
      email: [''],
      addresses: this.fb.array([]) // 地址数组对应的FormArray
    });
  }

  // 获取FormArray的便捷方法
  get addressesFormArray(): FormArray {
    return this.userForm.get('addresses') as FormArray;
  }

  // 完成赋值的setDetail方法
  setDetail(): void {
    // 情况1：表单字段与MyAddress接口完全匹配，直接赋值
    this.myObj.myAddress = this.addressesFormArray.value as MyAddress[];

    // 情况2：表单字段与接口字段不匹配，手动映射字段
    // const formattedAddresses: MyAddress[] = this.addressesFormArray.controls.map(ctrl => {
    //   const value = ctrl.value;
    //   return {
    //     street: value.streetName, // 表单字段是streetName，接口是street
    //     city: value.city,
    //     zipCode: value.zip
    //   };
    // });
    // this.myObj.myAddress = formattedAddresses;

    // 同步表单其他字段到myObj
    this.myObj.name = this.userForm.get('name')?.value;
    this.myObj.email = this.userForm.get('email')?.value;
  }
}

关键说明： #

• 若FormArray子表单的字段和MyAddress接口字段完全一致，直接用this.addressesFormArray.value即可，通过类型断言确保符合接口要求。
• 若字段存在差异，通过map遍历每个表单控件，手动把表单字段映射到接口字段，保证最终对象结构合规。
• 使用?.可选链操作符避免控件为空时的报错，提升代码稳定性。

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