递归ReactiveForm在模板

时间:2019-05-16 20:20:28

标签: angular recursion reactive-forms ng-template

我正在使用一个元数据对象来动态创建一个非常大的表单(〜400个输入,尽管stackblitz示例中显示了一个小示例)。我需要使用元数据结构将特定于输入的信息携带到输入中(即输入的类型,选择选项,步长等)。当我的html ng-template在a之后被递归调用时,其父窗体无法识别。当我超过初始递归级别时,ReactiveForm无法跟踪到所需的formGroup。

本质上,formGroupName似乎无法遍历递归模板的各个级别。

我一直在转动方向盘一段时间以尝试实现此功能,但无济于事。

我有一个试图做的事的例子。

https://stackblitz.com/edit/angular-jndvkb

任何帮助弄清楚为何FormGroup向下的路径在模板内部均不起作用的任何帮助,将不胜感激。

1 个答案:

答案 0 :(得分:0)

无论出于何种原因,formGroupName都无法进入ng-container。为了解决这个问题,我将formGroupName移到了ng-template的顶部,并将其更改为[formGroup]。将formGroup实例传递到ng-template并在其中创建嵌套/递归表单。

解决方案突飞猛进: https://stackblitz.com/edit/angular-k9saz2

我仍然不知道问题的根本原因,但是现在我有了一个从初始formGroup递归生成的表单,并且所有验证器都绑定到每个输入。我还可以访问元数据结构以根据需要呈现输入。

通过更改构造函数中的初始formGroup声明,我还可以轻松添加/删除/编辑输入。这样一来,维护变得非常容易。

对我来说,下一步是将所有formGroup和元数据生成移动到服务,并将它们作为输入传递到该组件中,以便我可以将此模板重新用于不同的表单组。