Angular含formGroupName的响应式编辑表单无法Patch值问题

Angular项目中实现了带formGroupName的响应式表单，查询、新增、删除功能正常，但进入编辑页面时，无法将接口返回的数据patch到customerDetail分组中。控制台能正常打印接口数据，移除formGroupName后表单可正常显示数据，但需要保留该分组，仅customerDetail组内字段无法显示值，其余字段正常。

在使用patchValue赋值时，错误地给customerDetail字段传递了FormGroup实例（通过this._fb.group(...)创建），而Angular的patchValue方法需要的是与表单结构匹配的纯JavaScript对象，而非FormGroup实例。同时，从接口返回数据中取值时未正确对应嵌套结构（接口返回的firstname等字段在customerDetail对象下，而非直接在res根节点）。

1. 移除patchValue中对customerDetail使用this._fb.group()的写法，直接传递包含对应字段的普通对象
2. 从接口返回的res中正确获取customerDetail对象，或直接提取对应字段组成对象

ngOnInit(): void {
  this.customerFormData()
  console.log(this._router.snapshot.params['id']);
  this._newCustomerService.getCustomerById(this._router.snapshot.params['id'])
  .subscribe({
    next:(res:any)=>{
      console.log(res)
      // 方案一：直接传递整个customerDetail对象（接口返回结构与表单完全匹配时使用）
      this.customerForm.patchValue({
        customerDetail: res.customerDetail,
        street: res.street,
        city: res.city,
        state: res.state,
      })

      // 方案二：手动提取字段（需调整字段映射时使用）
      // this.customerForm.patchValue({
      //   customerDetail: {
      //     firstname: res.customerDetail.firstname,
      //     lastname: res.customerDetail.lastname,
      //     email: res.customerDetail.email,
      //     phone: res.customerDetail.phone,
      //   },
      //   street: res.street,
      //   city: res.city,
      //   state: res.state,
      // })
    }
  })
}

• 确保接口返回的数据结构与表单结构完全对应：表单中customerDetail是嵌套分组，接口返回的res也必须包含同名嵌套对象（如API示例所示）
• 若后续需单独更新customerDetail分组内的字段，可单独获取该分组后使用patchValue：

  (this.customerForm.get('customerDetail') as FormGroup).patchValue({
    firstname: '新名字'
  })
  

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