Angular响应式表单：如何填充属性及回写嵌套属性？

嘿，我完全懂你的困扰！从用惯了双向绑定的ngModel转到响应式表单，最别扭的就是没法一键把表单值同步回嵌套复杂的原数据对象，总不能每个属性都手动写赋值语句对吧？

其实响应式表单也有便捷的方案，核心思路是让表单结构和你的数据结构完全对齐，这样就能像ngModel一样轻松同步，我给你捋两种实用的方法：

1. 调整表单结构为嵌套形式（最推荐） #

你现在的表单是扁平的，但你的数据是data -> settings -> property1/2的嵌套结构，那咱们把表单也改成嵌套的FormGroup，这样表单值的结构就和data完全一致了：

组件代码调整：

this.myForm = this.fb.group({
  name: new FormControl({ value: this.data.name }, [Validators.required, Validators.minLength(3)]),
  // 把settings做成嵌套的FormGroup
  settings: this.fb.group({
    property1: new FormControl({ value: this.data.settings.property1 }, Validators.required),
    property2: new FormControl({ value: this.data.settings.property2 }, Validators.required),
  })
});

模板代码调整：

<form [formGroup]="myForm">
  <input formControlName="name" />
  <!-- 用formGroupName指定嵌套的FormGroup -->
  <div formGroupName="settings">
    <input formControlName="property1" />
    <input formControlName="property2" />
  </div>
</form>

现在表单的value就是{name: 'xxx', settings: {property1: 'xxx', property2: 'xxx'}}，和data结构完全匹配，同步起来超简单：

• 如果是提交时同步：

submitForm() {
  // 用Object.assign或者扩展运算符合并即可，不会覆盖data里其他未在表单中的属性
  Object.assign(this.data, this.myForm.value);
  // 或者：this.data = {...this.data, ...this.myForm.value};
}

• 如果需要实时同步（类似ngModel的双向绑定效果）：

private valueChangesSub!: Subscription;

ngOnInit() {
  this.valueChangesSub = this.myForm.valueChanges.subscribe(formValue => {
    Object.assign(this.data, formValue);
  });
}

// 别忘了在组件销毁时取消订阅，避免内存泄漏
ngOnDestroy() {
  this.valueChangesSub.unsubscribe();
}

2. 不调整表单结构，用映射函数同步 #

如果因为各种原因没法改现有表单结构（比如已经写了大量扁平控件），可以写一个简单的映射函数，把表单的扁平值转换成和data匹配的嵌套结构，再同步：

// 定义映射规则，把表单扁平值转成data的结构
const mapFormToData = (formValue: any) => ({
  name: formValue.name,
  settings: {
    property1: formValue.property1,
    property2: formValue.property2
  }
});

// 同步时调用这个函数
this.myForm.valueChanges.subscribe(formValue => {
  Object.assign(this.data, mapFormToData(formValue));
});

这种方法虽然也要写映射，但比你说的if-else逐个判断要简洁得多，而且如果后续属性增加，只需要在映射函数里加对应规则就行。

本质上，ngModel的双向绑定是帮你做了“表单值→数据对象”的自动映射，而响应式表单需要你手动对齐结构或者写映射，但只要结构对齐了，同步的便捷性完全不输ngModel，还能享受到响应式表单在表单验证、状态管理上的优势～

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