Angular：如何在HTML模板中处理嵌套FormGroup的表单绑定问题

要实现Angular响应式表单的层级绑定，按以下规则修改模板即可：

1. 绑定顶层FormGroup控件 #

你已经在<form>标签上通过[formGroup]关联了顶层的userInformation实例，顶层的两个输入框直接添加formControlName属性，属性值和你定义的FormControl键名一一对应即可。

2. 绑定嵌套的friend FormGroup控件 #

对于嵌套的子FormGroup，需要先通过formGroupName指令指定子FormGroup的键名friend，通常用一个容器元素（如div）包裹嵌套的输入框，给容器添加formGroupName="friend"，容器内的输入框再用formControlName绑定friend下的name和age属性即可。

另外注意原模板中(ngSubmit)="onSubmit"缺少方法调用的括号，需要修改为(ngSubmit)="onSubmit()"才能正常触发提交逻辑。

修改后的完整模板代码如下：

<form [formGroup]="userInformation" (ngSubmit)="onSubmit()">
    <!-- 顶层用户信息控件 -->
    <input type="text" placeholder="用户姓名" formControlName="name">
    <input type="text" placeholder="用户年龄" formControlName="age">

    <!-- 嵌套好友信息FormGroup -->
    <div formGroupName="friend">
        <input type="text" placeholder="好友姓名" formControlName="name">
        <input type="text" placeholder="好友年龄" formControlName="age">
    </div>

    <button type="submit" [disabled]="userInformation.invalid">提交表单</button>
</form>

绑定完成后，调用userInformation.value就能直接拿到符合你定义结构的完整表单数据，所有控件的校验状态也会自动同步。

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