如何使用redux-form处理卸载字段和字段级验证?

时间:2018-01-17 05:31:32

标签: reactjs react-redux redux-form

所以我正在使用Redux-form来管理我的表单状态。我希望有一个简单的扩展面板,其中包含字段,以便在打开页面时用户不会被字段淹没。这里的基本问题是,当隐藏字段时,它们将被我正在使用的UI库卸载(react-md),因此任何字段级验证错误都将被丢弃,即使存在必填字段或无效字段,表单也会提交。我知道我可以编写一个完整的验证函数并完全跳过字段级验证,但我真的不愿意,因为我的表单相当大而且会很快变得麻烦。

我已尝试将字段装入然后卸载destroyOnUnmountforceUnregisterOnUnmount禁用,但似乎提交逻辑忽略了未装入字段的错误,即使禁用了这些选项,所以没有骰子。有什么建议吗?

编辑:所以,我尝试将每个扩展面板包装在其自己的表单中,但我无法在父表单的onSubmit函数中访问我的redux状态。

1 个答案:

答案 0 :(得分:1)

这是一个艰难的局面。我正在查看扩展面板的react-md模块文档,看起来他们可能有一个方法可以解决问题。

他们所做的是让每个可折叠面板都有自己的形式,并拥有自己的验证。当他们完成一个面板时,他们可以按下该面板的保存,然后您可以将状态保存到一些全局的表单值集合,以便稍后传递给服务器。

这允许每个面板自我验证。为了防止它们过早地提交表单,您可以编写一些简单的JS逻辑来禁用整个提交按钮,直到保存所有子面板。

这需要一点提升,但它允许您使用redux-forms的表单级验证,也可以使用可折叠面板。

祝你好运!

相关问题