Angular: 如何处理 HTML 模板中的嵌套 FormGroup？

Question

我是 Angular 的新手，正在尝试构建一个表单来收集用户信息。

假设我有一个用户可以关联一个“朋友”。我的 FormGroup 的简化版本如下所示：

userInformation = new FormGroup({
   name: new FormControl('', [Validators.required]),
   age: new FormControl('', [Validators.required]),
   friend: new FormGroup({
      name: new FormControl('', [Validators.required]),
      age: new FormControl('', [Validators.required])
   })
})

在我的 HTML 中，我有：

<form [formGroup]="userInformation" (ngSubmit)="onSubmit">
    <input type="text" placeholder="full name">
    <input type="text" placeholder="full name">
    <input type="text" placeholder="full name">
    <input type="text" placeholder="full name">
</form>

如何将前两个输入绑定到 userInformation 并将后两个输入绑定到 userInformation.friend？

Answer 1

对于嵌套表单组，我们使用 formgroupName，因此您只需创建一个容器，在其中设置 formGroupName 和其中的“好友”表单控件：

<form [formGroup]="userInformation">
  <input type="text" formControlName="name" placeholder="name" />
  <input type="text" formControlName="age" placeholder="age" />
  <ng-container formGroupName="friend">
  <!-- ^^^^^^^^^HERE^^^^^^^^^^^^^^^^-->
    <input type="text" formControlName="name" placeholder="name" />
    <input type="text" formControlName="age" placeholder="age" />
  </ng-container>
</form>

Angular: 如何处理 HTML 模板中的嵌套 FormGroup？

Angular: How do I deal with nested FormGroups in the HMLT Template?

form-control

angular

formgroups