Angular响应式表单能否一次性获取所有值批量赋值给对应模型？

结论 #

完全可以这么写，属于Angular响应式表单的标准用法，合法可行，注意几个细节即可。

注意事项 #

1. 不推荐响应式表单和模板驱动表单（ngModel）混用
   你现在同时给输入框绑定formControlName和[(ngModel)]属于两种表单模式混用，虽然当前版本可运行，但Angular 6+之后已经不推荐这种写法，运行时会抛出警告。响应式表单本身已经通过FormGroup自动管理所有表单控件的值，完全可以去掉所有ngModel相关的绑定和组件内单独定义的name、address等变量，减少冗余代码。

2. 直接赋值的边界兼容
   当你的formControlName命名和SampleClass的属性名完全一致时，this.angForm.value返回的对象结构会和模型类完全匹配，直接赋值是生效的，但要注意两种场景的兼容：

• 如果SampleClass存在未在表单中定义的属性，直接赋值后这些属性会被覆盖为undefined。如果需要保留模型类的默认值，可以改用Object.assign合并：

this.obj = Object.assign(new SampleClass(), this.angForm.value);

• 如果表单包含嵌套FormGroup、FormArray结构，需要保证SampleClass对应的属性也是相同的嵌套对象、数组结构，才能正常匹配赋值。

3. 赋值前建议先校验表单
   建议先判断表单校验通过再执行赋值逻辑，避免拿到非法的表单值：

buttonClicked() {
  if (this.angForm.valid) {
    this.obj = this.angForm.value as SampleClass;
    // 后续业务逻辑
  }
}

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