Redux表单-按需验证-向导表单

Question

I'm using redux-form to build a multipage form.

I have a multi "page" form. My parent form is initialize like this :

Parents = reduxForm({
    form: 'my-form',
    enableReinitialize: true,
    destroyOnUnmount: false,
})(Parents);

And multiple component/page displayed conditionaly like this :

{(step === 1) && <Intro onSubmit={this.handleSubmit} loading={submitting}/>}
{(step === 2) && <Motifs onSubmit={this.handleSubmit} onSubmitFail={this.handleSubmitFail} loading={submitting}/>}
{(step === 3) && <Fichiers onSubmit={this.handleSubmit} onSubmitFail={this.handleSubmitFail} loading={submitting}/>}
{(step === 4) && <Confirmation onSubmit={this.handleSubmit} onSubmitFail={this.handleSubmitFail} loading={submitting}/>}
{(step === 5) && <Terminee onSubmit={this.handleSubmit} onSubmitFail={this.handleSubmitFail} loading={submitting}/>}

this.handleSubmit is a function that call this.props.handleSubmit() and add or remove 1 to step if the server respond http 200.

On the components <Motifs> for example i initialize redux-form like this :

Motifs = reduxForm({
    form: 'my-form',
    destroyOnUnmount: false,
    validate: validateMotifs // validation function
})(Motifs);

And for each of my form components/pages i have some button to previous/next like this : <NavFormButton loading={loading} handleSubmit={handleSubmit} onSubmit={onSubmit}/>

When i click next i want to validate and submit the form. It's working. But when i go previous i just want to submit the data so they are saved but don't want to validate because the user may have not fill all the fields.

How should i do ? Am i following the good path ?

Having a lot of trouble to understand how to do this correctly ... Thanks.

Answer 1

First you can try to reinitialize form with the current values, submit and then go to the previous form.

dispatch(initialize('my-form', newInitialValues))

See more here

Also if you are using v6, then you should look shouldAsyncValidate function to run async validation when you need it. Official docs