如何动态更改 ngrx 表单中的表单 ID？

Question

这个问题是关于ngrx-forms的

如何动态更改ngrx表单中的表单id？

我有一个表格数据列表。表中的每一行都包含不同产品的详细信息。 （每一行您都可以看到具有不同属性的不同产品）。

每一行都是新产品

因此，这些行中的每一行都有一个编辑选项。因此，当单击它时，它将弹出并填充产品随附的相应表单控件（来自表格行）。在这里，用户可以编辑特定的产品详细信息。并保存。

当用户在保存表单（此表单是侧面板）后关闭并打开另一个产品时，前一个产品表单中的值会保留在当前打开的表单中。

我觉得这是因为 formIds 是相同的。因此，为了防止这种情况，我认为唯一的方法是在用户单击每个编辑按钮时动态分配新的 formId。

有什么办法吗？

如果不可能的话，我认为另一种方法是动态地将子表单添加到父表单。但这会导致每次用户单击编辑产品时父表单树都会增长。

但是如果我们这样做，如果我们想在那些新创建的子表单中为某些子属性添加动态控件怎么办？

...类似于将 FormGroupState(child) 嵌套在另一个 FormGroupState(parent) 中，然后它是父子窗体的子窗体。

我知道这有点复杂。但是有办法解决吗？

Answer 1

ngrx-forms的作者在这里。

我看到了几个选项：

1) 每当侧面板关闭/打开时重置/重新创建表单。这是最简单的解决方案，因为它允许您只使用单个表单状态而没有任何 ID 恶作剧。要做到这一点，要么为您的closeSidebarAction（如果您已经有类似的操作）添加一个处理程序到表单减速器，或者创建一个新操作。在 reducer 中执行该操作，只需使用 formState: createFormGroup('MY_FORM_ID', initialValue) 即可完全重置表单状态。

2) 通过创建一个包含所有产品表单的大表单数组，让 ngrx-forms 管理所有表单。这样，每个产品都会有自己的表单状态。我不喜欢这种设计，因为从概念上讲没有这样的父窗体，而是每个产品窗体应该是独立的。

3) 自己为每个产品创建和管理一个表单状态。然后，您可以使用 productId 或类似的东西作为表单 ID 的一部分。即使用户切换到不同的产品并开始编辑它，这也允许您保持单个产品的表单状态。

总之，我相信选项 1 是您想要的。我希望这会有所帮助。