Angular模板表单setValue报错，如何正确为模板表单赋值？

报错原因 #

Angular 模板驱动表单的 setValue() 方法对入参有严格要求：传入对象的结构必须和表单的实际控件层级、控件名称完全匹配，缺一不可。
你的表单通过 ngModelGroup 定义的控件结构如下：

- 根表单
  - xValue (ngModelGroup)
    - value1 (单选组控件名)
    - note1 (文本框控件名)
  - yValue (ngModelGroup)
    - value2 (单选组控件名)
    - note2 (文本框控件名)

但你传入的 existingFormValuesFromApi 结构是 {xValue:{value:string,note:string},yValue:{value:string,note:string}}，xValue 层级下没有名为 value1 的属性，只有 value 属性，结构不匹配导致 setValue() 找不到对应控件的值，抛出缺失value1的报错。

初始化赋值正常的原因 #

初始化阶段你是直接修改双向绑定的源对象 this.data，[(ngModel)] 是直接绑定到 data 的属性路径（比如data.xValue.value），只要路径和data的结构匹配就能正常取值，不需要对齐表单控件的命名规则，因此可以正常回显。

正确赋值方案 #

推荐两种符合取消编辑场景的实现方式：

方案1：直接修改绑定源+重置表单状态（最简单） #

因为表单和data是双向绑定，直接把data赋值为深拷贝后的API历史值，表单值会自动同步，再调用resetForm()清空表单的 touched、dirty 等交互状态即可：

this.data = JSON.parse(JSON.stringify(this.existingFormValuesFromApi));
// 重置表单交互状态为初始态
this.testForm.resetForm();

方案2：使用表单方法赋值 #

如果需要通过表单API直接赋值，要把入参结构调整为和表单控件结构完全匹配：

// 用setValue赋值
this.testForm.setValue({
  xValue: {
    value1: this.existingFormValuesFromApi.xValue.value,
    note1: this.existingFormValuesFromApi.xValue.note
  },
  yValue: {
    value2: this.existingFormValuesFromApi.yValue.value,
    note2: this.existingFormValuesFromApi.yValue.note
  }
});

// 更推荐用resetForm，会同时重置交互状态
this.testForm.resetForm({
  xValue: {
    value1: this.existingFormValuesFromApi.xValue.value,
    note1: this.existingFormValuesFromApi.xValue.note
  },
  yValue: {
    value2: this.existingFormValuesFromApi.yValue.value,
    note2: this.existingFormValuesFromApi.yValue.note
  }
});

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