Angular：实现ControlValueAccessor的子组件[formGroup]下ngSubmit不触发

问题现象 #

实现ControlValueAccessor的子组件（如地址组件）中，三种表单绑定场景表现存在明显差异：

• 使用[formControl]绑定：可正常触发ngSubmit
• 使用formGroupName绑定：可正常触发ngSubmit
• 使用[formGroup]绑定：无法触发ngSubmit
  子组件通过注入FormGroupDirective订阅ngSubmit事件，但在[formGroup]场景下完全无响应。

核心原因：表单指令的上下文关联逻辑差异 #

1. formGroupName的关联逻辑 #

当使用formGroupName时，子组件会自动继承父表单的FormGroupDirective实例。此时子组件注入的FormGroupDirective和父表单的指令是同一个对象，父表单触发ngSubmit时，子组件的订阅会同步响应。

这种绑定方式完全契合ControlValueAccessor的设计初衷：将子组件作为父表单的一个"子表单组节点"，保持整个表单上下文的一致性。

2. [formGroup]的独立上下文 #

当直接使用[formGroup]绑定子组件内部的FormGroup时，Angular会在子组件内部创建一个全新的FormGroupDirective实例，这个实例和父表单的指令完全独立。

子组件注入的是自己内部的FormGroupDirective，而ngSubmit事件属于父表单的提交动作，两者分属不同的表单上下文，自然无法监听到事件。

总结 #

如果你的子组件是作为父表单的一部分通过ControlValueAccessor集成，必须使用formGroupName来关联父表单的对应组，才能保证表单指令上下文一致，提交事件正常传递。[formGroup]会创建独立的表单上下文，打破和父表单的关联，直接导致事件无法触发。

内容的提问来源于stack exchange，提问作者Paul