Redux Form - как отключить синхронизацию / асинхронную проверку с флагом

Я ищу наиболее неинвазивный способ отключить проверку формы redux для целей разработки / отладки
У меня есть форма мастера, похожая на туториал https://redux-form.com/8.1.0/examples/wizard/, но я использую валидаторы полей плюс асинхронный валидатор,
я бы по-прежнему хотел бы отображать ошибки, но иметь возможность перейти к следующему шагу мастера, даже если проверка не удалась
Я хотел бы добавить флаг к URL-адресу, например? ignore-validation = true (с использованием реагирующего маршрутизатора)

вот фрагмент моего мастера 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);

person jeff    schedule 09.01.2019    source источник


Ответы (1)


Я вижу здесь две возможности:

1) Разделите формы мастера на несколько форм и проверьте их по отдельности. Вы можете создать другое состояние, чтобы контролировать, какую форму вы хотите отображать. Несмотря на то, что у него больше состояний для управления, я бы выбрал это.

2) Вы можете оставить только асинхронную проверку для каждого поля и выбросить туда ошибки. Кроме того, вы должны создать состояние для управления страницей и управлять ею внутри функций асинхронной проверки. Я создаю пример этого второго подхода: https://codesandbox.io/s/o46k8lx7kz

person aquilesb    schedule 10.01.2019