Angular: 组件中有多个嵌套的 FormGroup

Question

我正在尝试嵌套多个 FormGroup，如果我不想将模板外包给自己的组件，这种方法效果很好。

这是一个有效的例子

Template

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

Typescript

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

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

可在以下 link 处找到示例。在那里，您可以通过注释掉 "app.component.html"

中的相应代码部分来尝试两种方式

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

Answer 1

那是因为 ControlContainer 提供商可以在这些指令中的任何一个上注册：

模板驱动指令

NgForm
NgModelGroup，

响应式指令

FormGroupDirective
表格组名
FormArrayName

但是你期望它总是 FormGroupDirective 而在第二个组件中 parent ControlContainer 是 FormGroupName.

我会使用通用的解决方案，无论类型如何 parent ControlContainer:

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

Forked Stackblitz

Angular: 组件中有多个嵌套的 FormGroup

Angular: Multiple nested FormGroups in Component

angular

typescript

formgroups