递归ReactiveForm在模板内部找不到formGroups [英] Recursive ReactiveForm cannot find formGroups inside of template

问题描述

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

I am using a meta-data object to dynamically create a very large form (~400 inputs, though a small sample is shown in stackblitz example). I need to use the meta-data structure to carry input-specific information to the inputs (i.e. type of input, select options, step size, etc). When my html ng-template gets called recursively inside of a and subsequently , the parent form is not recognized. When I get past the initial recursion level, the ReactiveForm cannot trace to the desired formGroup.

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

Essentially, the formGroupName appears to be unable to traverse through levels of the recursive template.

为了使此功能正常运转，我已经转动了一段时间，但无济于事.

I have been spinning my wheel for a while trying to get this functional, but to no avail.

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

I have a stackblitz example of what I am trying to do.

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

任何帮助弄清楚为什么通过FormGroup的路径在模板内部均不起作用的任何帮助，将不胜感激.

Any help figuring out why the path down through the FormGroup does not work inside of the templates would be greatly appreciated.

推荐答案

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

For whatever reason, the formGroupName could not reach into the ng-container. To remedy this, I moved the formGroupName to the top of the ng-template, and changed it to [formGroup]. The formGroup instance is passed into the ng-template and the nested/recursive forms are created there.

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

Solution stackblitz: https://stackblitz.com/edit/angular-k9saz2

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

I still do not know the root-cause of the issue, but now I have a form that generates recursively from an initial formGroup, and has all the validators tied to each input. I also have access to the meta-data structure to render my inputs as I need to.

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

I can also easily add/remove/edit inputs by only changing the initial formGroup declaration in my constructor. This makes maintenance very easy down the road.

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

The next step for me would be to move all the formGroup and meta-data generation to a service, and have them passed into this component as Inputs, so I can re-use this template for different groups of forms.

这篇关于递归ReactiveForm在模板内部找不到formGroups的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！