Redux 表单 - 如何使用标志禁用同步/异步验证



>我正在寻找最非侵入性的方法来禁用用于开发/调试目的
的 redux 表单验证我有一个类似于教程 https://redux-form.com/8.1.0/examples/wizard/的向导表单,但我正在使用字段验证器和异步验证器
我仍然想显示错误,但即使验证失败
也能继续执行下一个向导步骤我想在网址上添加一个标志,例如 ?ignore-validation=true(使用 react router)

这是我的向导步骤1的片段:

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);

我在这里看到了两种可能性:

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

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

最新更新