Javascript 嵌套的反应窗体控件不'；无法获取ngSubmit事件

在构建更复杂的反应式表单时，我不止一次在嵌套反应式表单组时遇到了一个问题

所以我有两种情况：

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

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

目标是侦听自定义输入组件中的ngSubmit事件以显示其错误状态

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

我猜这个场景中的问题与它试图抓住的“错误”控制容器有关@Host（）只查找喷油器链，直到它到达主机，而不是更远。但是，此FormControlDirective对表单提交一无所知

如果这是真的，我会尝试将ControlContainer传递给partial组件，使其可用于输入组件。

viewProviders:[{provide:ControlContainer，useExisting:FormGroupDirective}]

不幸的是，这并不像预期的那样有效

为了使这一点更加具体，我在这里创建了一个基本示例：

---

如果能在这里得到一些帮助，了解它为什么会这样，以及如何创建一个好的解决方案，那就太好了。

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

对于嵌套的FormGroups，您可能希望使用formGroupName来 确保嵌套的组值和验证状态正确 同步到父组的值和验证状态等 事情

因此，如果您确实有一个嵌套的[formGroup]，它通常表示 您有一个与父窗体不相关的嵌套窗体。它是 另一个顶级窗体，它将不连接到其父窗体的 模型这是一种比较常见的模式，因为对于CSS/ 由于定位原因，您可能有一个子表单 在另一个表单的表单标签中，但不相关（例如 购物结帐表和“通讯注册”子表）

还有一个公开的问题

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

ControlContainer

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

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

FormGroupDirective

为了使这一点更加具体，我更新了您的

另见：

---

非常感谢您的时间、解释，当然还有解决方案@yurzui