Question

我正在尝试嵌套多个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

Answer 1

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

模板驱动的指令

NgForm
NgModelGroup，

反应性指令

FormGroupDirective
FormGroupName
FormArrayName

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

我将使用通用解决方案，该解决方案无论父ControlContainer的类型如何都可以使用：

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

Forked Stackblitz

角度：组件中的多个嵌套FormGroup

1 个答案: