角:组件中的多个嵌套FormGroups

Question

我正在尝试嵌套几个FormGroups，如果我不想将模板外包给自己的组件，那么它工作得很好。

下面是一个例子，它起作用了

模板

<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

Answer 1

这是因为ControlContainer提供程序可以在以下任何指令中注册：

模板驱动指令

• NgForm
• NgModelGroup，

反应指令

• FormGroupDirective
• FormGroupName
• FormArrayName

但是您希望它始终是FormGroupDirective，而在第二个组件中，父ControlContainer是FormGroupName。

我将使用公共解决方案，无论父ControlContainer类型如何，该解决方案都能工作。

viewProviders: [{
  provide: ControlContainer,
  useFactory: (container: ControlContainer) => container,
  deps: [[new SkipSelf(), ControlContainer]],
}]

叉式斯塔克布利茨