小编Mur*_*ack的帖子

我正在尝试嵌套多个 FormGroup，如果我不想将模板外包给自己的组件，它会非常有效。

这是一个有效的例子

模板

<form [formGroup]="baseForm">
  <div formGroupName="nestedForm1">
    <div formGroupName="nestedForm2">
      <input formControlName="nestedControl">
    </div>
  </div>
</form>

打字稿

this.baseForm = this.formBuilder.group({
  nestedForm1: this.formBuilder.group({
    nestedForm2: this.formBuilder.group({
      nestedControl: ["Default Value"]
    })
  })
});

如果我尝试将“nestedForm1”和“nestedForm2”外包到单独的组件中，则它从第二级开始不再起作用。

可以在以下链接中找到示例。您可以通过注释掉“app.component.html”中的相应代码部分来尝试这两种方法

https://stackblitz.com/edit/angular-gnpw24?file=src%2Fapp%2Fapp.component.html