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

时间:2019-01-03 17:25:45

标签: angular forms validation angular-material

我的要求:单个FormControl必须包含多个输入的答案(多个子FormControls或FormGroups )。

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

一个很好的例子是电话输入拆分,其中包括国家/地区代码下拉电话号码输入分机输入彼此分开,但是一起在一个FormGroup中。随着任何这些输入值的更改,父级FormControl值也必须更改。

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

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

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

环境

  • Angular 7
  • 材料7
  • NGRX 6

1 个答案:

答案 0 :(得分:0)

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

我们为此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-question-angular-2-large-scale-application-forms-handling

希望有帮助!