时间戳

首页 > 解决方案 > Redux Form - how to disable sync/async validation with a flag

reactjs - Redux Form - how to disable sync/async validation with a flag

问题描述

I am looking for the most non invasive way to disable validation of redux form for dev/debug purposes
I have a wizard form similar to the tutorial https://redux-form.com/8.1.0/examples/wizard/ but I am using field validators plus an async validator
I would still like to display errors but be able to proceed to the next wizard step even when validation fails
I would like to add a flag to the url like ?ignore-validation=true (using react router)

here is a fragment of my wizard step1:

export class CustomerStep1 extends React.PureComponent<FormProps> {
    render(): React.Node {
            const {
                handleSubmit,
            } = this.props;

            const submit = handleSubmit(createValidateCardAction);

            return (
                    <form onSubmit={submit}>

                                    <Field
                                        name="card_number"
                                        placeholder="7777 1234 5678 9012"
                                        component={Input}
                                        validate={cardNumber}
                                    />
...

export default reduxForm({
    form: 'customerWizard',
    destroyOnUnmount: false,
    forceUnregisterOnUnmount: true,
})(CustomerStep1);

标签： reactjsreact-reduxreact-routerredux-formreact-redux-form

解决方案

我在这里看到两种可能性：

1) 将您的向导表单拆分为多个表单并分别验证它们。您可以创建另一个状态来控制要显示的表单。即使它有更多的状态要管理，我也会选择那个。

2）您可以只保留每个字段的异步验证并在那里抛出错误。此外，您必须创建一个状态来管理页面并在异步验证函数中对其进行管理。我创建了第二种方法的示例：https ://codesandbox.io/s/o46k8lx7kz

推荐阅读