如何在ngrx表单中动态更改表单id



这个问题是关于ngrx表单的

如何在ngrx表单中动态更改表单id?

我有一份表格数据清单。表中的每一行都包含不同产品的详细信息。(每一行都可以看到具有不同属性的不同产品(。

每一行都是新产品

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

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

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

有办法做到这一点吗?

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

但是,如果我们真的这样做了,如果我们想在那些新创建的子窗体中为一些子属性添加动态控件呢?

类似于将FormGroupState(子窗体(嵌套在另一个FormGroupState中(父窗体(,后者是子窗体到父窗体。

我知道这有点复杂。但是有办法绕过它吗?

ngrx表单的作者请点击此处。

我看到了几个选项:

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

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

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

总之,我相信选项1就是你想要的。我希望这能有所帮助。

最新更新