Angular子窗体控件/组值和错误冒泡至父级

Question

我的要求 ：单个FormControl必须包含多个输入的答案（ 多个子FormControls或FormGroups ）。

这是因为多个控件必须送入顶级（父）FormControl，并且父级FormControl的值必须经过过滤/操作以适合所需的格式。

一个很好的例子是电话输入拆分，其中国家（地区）代码下拉列表 ， 电话号码输入和分机输入 ，所有这些都彼此分开，但是一起在一个FormGroup中。 随着任何这些输入值的更改，父级FormControl值也必须更改。

除了冒泡的值外，子控件的错误也必须冒泡到父FormControl。

现在，我让父FormControl监听具有国家代码，电话号码和分机号输入的FormGroup的值更改。 然后，在组件上使用ControlValueAccessor，当FormGroup ValueChanges时写入父FormControl的值。

我需要一种方法来实现所需的结果，但也需要一种方法来执行更复杂的控件和FormGroups。 考虑多个级别的嵌套FormControls和/或FormGroups。

环境

• 角度7
• 材料7
• NGRX 6

Answer 1

最初，我们试图提供一个很好的解决方案来处理将巨大的表单分解为子表单（子组件...）的过程，我们想出了一个解决方案，但也可以访问嵌套错误。

我们已经为该https://github.com/cloudnc/ngx-sub-form构建了一个库，该库将为您提供更多的访问嵌套错误的方法，您可以在此处查看官方演示： https：// cloudnc。 github.io/ngx-sub-form/listings/new （编辑表单，查看显示的错误）

我也在这里https://stackoverflow.com/a/56375605/2398593回答了一个类似的SO问题，并在这里为该问题构建了一个演示（也展示了嵌套错误功能） https://stackblitz.com/edit / SO-问题-角-2-大规模应用-表单的处理

希望能帮助到你！

编辑：

如果您想走得更远，我刚刚在这里发布了一篇博客文章，以解释有关表单和ngx-sub-form的许多内容，网址为https://dev.to/maxime1992/building-scalable-robust-and-type-安全表单与-角3nf9