Angular响应式表单嵌套FormGroup：如何绑定子表单控件的formControlName？

你不能直接用formControlName="profile.company_name"这种点语法绑定嵌套FormGroup里的控件，Angular的formControlName只能识别当前FormGroup下的直接控件名。要绑定嵌套FormGroup中的控件，有两种常用的有效方法：

方法一：使用formGroupName指令 #

在包裹子表单控件的容器（比如div、fieldset）上添加formGroupName="profile"，容器内的formControlName就会自动相对于这个子FormGroup解析：

<div [formGroup]="userForm">
  <!-- 父FormGroup的控件示例 -->
  <input formControlName="firstName" placeholder="名">

  <!-- 嵌套的profile表单区域 -->
  <div formGroupName="profile">
    <input formControlName="company_name" placeholder="公司名称">
    <input formControlName="address" placeholder="地址">
    <input formControlName="zipCode" placeholder="邮编">
  </div>
</div>

方法二：直接通过父表单路径绑定 #

如果不想额外嵌套容器，也可以用[formControl]指令直接绑定到父表单中嵌套控件的完整路径：

<div [formGroup]="userForm">
  <input [formControl]="userForm.get('profile.company_name')" placeholder="公司名称">
</div>

如果模板中需要多次访问子表单控件，建议在组件类里定义一个getter简化代码：

get profileForm(): FormGroup {
  return this.userForm.get('profile') as FormGroup;
}

之后模板里就能更简洁地调用：

<input [formControl]="profileForm.get('company_name')" placeholder="公司名称">

两种方法都能实现正确绑定，推荐第一种，它更贴合Angular表单的结构设计，代码可读性和维护性更强。

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