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

How can I dynamically change the form id in ngrx forms?

这个问题是关于 ngrx-forms

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

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

每一行都是新产品

所以每一行都有一个编辑选项。因此,当单击它时,它将弹出并填充产品附带的相应表单控件(来自 table 行)。用户可以在这里编辑该特定产品的详细信息。 & 保存。

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

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

有什么办法吗?

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

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

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

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

ngrx-forms 的作者。

我看到了几个选项:

1) reset/recreate 侧面板为 closed/opened 时的表单。这是最简单的解决方案,因为它允许您只使用单个表单状态而无需任何 ID 恶作剧。要做到这一点,可以为您的 closeSidebarAction 添加一个处理程序到表单缩减器(如果您已经有这样的操作)或创建一个新操作。在该操作的 reducer 内部,只需使用 formState: createFormGroup('MY_FORM_ID', initialValue) 即可完全重置表单状态。

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

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

综上所述,我相信选项 1 是您想要的。希望对您有所帮助。