Reactjs react-redux表单:在手风琴中验证表单/验证未安装的表单
这个问题是关于使用库react redux表单处理多部分表单的验证 问题:我有3张表格和一个包装它们的容器。表格从容器中提交。安装容器时,仅显示(已安装)一个表单,其余表单隐藏(未安装)。向用户显示每个表单的“有效”状态Reactjs react-redux表单:在手风琴中验证表单/验证未安装的表单,reactjs,validation,react-redux-form,Reactjs,Validation,React Redux Form,这个问题是关于使用库react redux表单处理多部分表单的验证 问题:我有3张表格和一个包装它们的容器。表格从容器中提交。安装容器时,仅显示(已安装)一个表单,其余表单隐藏(未安装)。向用户显示每个表单的“有效”状态 if (current === 1) { <MyFirstForm/> } if (current === 2) { <MySecondForm/> } if (current === 3) { <MyThirdForm/>
if (current === 1) {
<MyFirstForm/>
}
if (current === 2) {
<MySecondForm/>
}
if (current === 3) {
<MyThirdForm/>
}
<button disabled={formsNotValid}> Submit </button>
if(当前===1){
}
如果(当前===2){
}
如果(当前===3){
}
提交
在这一点上-安装后-没有任何验证。
此时,我需要对未安装的表单执行验证操作。这是因为表单数据有时是从localStore加载的
默认情况下,库似乎将所有“有效”状态都设置为“true”,除了装载时验证并相应设置的装载表单之外。因此,目前我正在执行一个setValidity操作,将所有内容设置为false(但这将覆盖挂载表单上的初始验证操作)。但这感觉有点像黑客-我应该实际验证表单
有一个验证操作:()
但据我所知,这需要用户通过所有验证规则。我想我可以重构来完成这项工作,但我目前已经定义了所有字段的验证规则
<Control.text
model=".test"
component={Text}
placeholder="test"
validators={{
required: val => val,
}}
/>
val,
}}
/>
通过在容器上传递validate操作中所有字段的所有验证规则是否是处理此问题的正确方法?我是说。。。我想这是有道理的,redux存储中没有存储任何验证规则,因此从技术上讲,在卸载表单时没有定义任何验证
也许这种模式是错误的?我应该有一个组件包装条件,只加载表单的不同部分?但我认为如果我这样做,验证将发生在未装入的字段上。。。这将导致其他问题
希望其他人也遇到过类似的情况,并且不介意就如何解决这个问题给出一些建议
谢谢
杰夫