Angular中patchValue无法将对象属性值填充到表单控件问题

问题现象 #

• 浏览器控制台可正常打印获取到的product对象，结构如下：

  {"productId": "3", "productName": "G500 cpu", "productDescription": "gaming computer", "productCategory": "computers", "units": 5 }
  

• 调用patchValue传入硬编码字符串值时，表单控件可正常渲染对应内容
• 直接将this.product整体传入表单控件时，输入框显示[object Object]
• 传入this.product的指定属性（如this.product.productId）时，输入框无任何内容展示

复现代码 #

TS业务逻辑 #

console.log(this.product)
this.updateForm.patchValue({
  // productId: '23128',                // 硬编码值可正常显示23128
  // productName: 'asdas',              // 硬编码值可正常显示asdas
  productId: this.product.productId,    // 无内容显示
  productName: this.product.productName // 无内容显示
  // productId: this.product,    // 显示[object Object]
  // productName: this.product // 显示[object Object]
})

HTML模板代码 #

<form [formGroup]="updateForm">
  <div class="form-group">
    <input
    type="text"
    class="form-control"
    formControlName="productId">
  </div>
  <div class="form-group">
    <input
      type="text"
      class="form-control"
      formControlName="productName"
    />
  </div>
</form>

根本原因 #

核心是代码执行时序问题，别被控制台的打印结果误导：
Chrome开发者工具对引用类型（对象、数组）的日志是懒解析的——你执行console.log(this.product)时，this.product大概率还没被异步接口赋值完成，但等你后续手动点开控制台查看这条日志的详情时，异步请求已经执行完毕、把返回值挂载到this.product上了，所以你看到日志里对象是完整有值的，但实际执行patchValue那行代码的瞬间，this.product还是undefined或者空对象，自然读不到productId、productName这些属性，赋值给表单的就是undefined，控件当然显示空白。

可以自己加一行日志验证：在patchValue执行前打印console.log('赋值瞬间的productId：', this.product?.productId)，你会看到输出是undefined。

解决方法 #

把patchValue的执行逻辑挪到this.product异步赋值完成的回调里，确保取值时this.product已经拿到完整数据：

// 以Http请求获取商品数据为例
this.productService.getProductDetail(productId).subscribe(res => {
  this.product = res; // 先完成product赋值
  // 数据到位后再执行表单赋值
  this.updateForm.patchValue({
    productId: this.product.productId,
    productName: this.product.productName,
    productDescription: this.product.productDescription,
    productCategory: this.product.productCategory,
    units: this.product.units
  })
})

如果是其他异步场景（比如路由参数取值、子组件传值），逻辑同理：等this.product确实拿到完整值之后，再调用patchValue给表单赋值。

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