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

【问题标题】：Angular child form control/group values and errors bubbling up to parentAngular 子窗体控件/组值和错误冒泡到父级
【发布时间】：2019-01-03 17:25:45
【问题描述】：

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

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

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

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

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

我需要一种方法来实现预期的结果，但也需要一种方法来完成更复杂的控件和 FormGroups。考虑多层次的嵌套 FormControls 和/或 FormGroups。

环境

角度 7
材质7
NGRX 6

【问题讨论】：

标签： angular forms validation angular-material

【解决方案1】：

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

我们已经为 https://github.com/cloudnc/ngx-sub-form 构建了一个库，它不仅可以让您访问嵌套错误，而且您可以在此处查看官方演示：https://cloudnc.github.io/ngx-sub-form/listings/new（编辑表单并查看显示的错误）

我还在这里回复了类似的 SO 问题 https://stackoverflow.com/a/56375605/2398593 并在此处为该问题构建了一个演示（还展示了嵌套错误功能）https://stackblitz.com/edit/so-question-angular-2-large-scale-application-forms-handling

希望对你有帮助！

编辑：

如果你想更进一步，我刚刚发布了一篇博文，在这里https://dev.to/maxime1992/building-scalable-robust-and-type-safe-forms-with-angular-3nf9

解释了很多关于表单和 ngx-sub-form 的事情

【讨论】：