Question

在构建更复杂的反应式表单时，我偶然发现了一个问题，同时嵌套了reactFormGroups不止一次。

所以我有两种情况：

表单组件->表单部分组件->自定义输入组件
表单组件->自定义输入组件

目标是在自定义输入组件中监听ngSubmit事件，以显示其错误状态。

在我的自定义输入组件中，我通过@Host（）装饰器注入ReactiveFormsDirective。但是，如果组件如方案1那样嵌套，则它将永远不会收到任何事件。

我的猜测是，这种情况下的问题与它试图控制的“错误” ControlContainer有关。 @Host（）只是查找喷射器链，直到到达主机为止。但是，此FormControlDirective对表单提交一无所知。

如果是这样，我将尝试将ControlContainer传递给部分组件，以使其可用于输入组件。 viewProviders: [ { provide: ControlContainer, useExisting: FormGroupDirective } ]

不幸的是，这不能按预期工作。

为使这一点更加明确，我在此处创建了一个基本示例：https://stackblitz.com/edit/angular-7rmpvt

很高兴在这里获得一些帮助，以了解其行为方式以及如何创建好的解决方案。

Answer 1

正如Kara所说，在处理复杂的反应式表单时，主要思想是我们应该在顶层仅定义一个[formGroup]指令。

对于嵌套FormGroup，您想使用formGroupName代替   确保嵌套的组值和验证状态正确   同步到父组的值和验证状态等   东西。

因此，如果您确实有嵌套的[formGroup]，则通常表示   您有一个与父窗体无关的嵌套窗体。它的   另一个不会与其父级关联的顶级表单   模型。这是一种相对常见的模式，因为对于CSS /   定位原因，您可能有一个恰好是   在另一种表单的表单标签中，但不相关（例如   购物结帐表格以及“新闻简报注册”子表格）。

https://github.com/angular/angular/issues/21263#issuecomment-357074997

还有一个https://github.com/angular/angular/issues/21823

未解决的问题

考虑到这一点，我们可以通过提供ControlContainer

来解决您提到的问题

AppComponent [formGroup]
   ||
   \/
FormPartialComponent
  1) add viewProviders: [ { provide: ControlContainer, useExisting: FormGroupDirective } ]
  2) remove [formGroup]
   ||
   \/
FormInputComponent
 remove @Host

这样，我们可以轻松地在FormPartialComponent中使用formControlName，并且FormInputComponent将获得顶级FormGroupDirective。

为使这一点更加明确，我更新了您的 Stackblitz Example

另请参阅：

Angular2 nested template driven form

嵌套的ReactiveForms控件不会发生ngSubmit事件

1 个答案: