Redux-form - Valider à la demande - formulaire de l'assistant

Question

J'utilise redux-form pour créer un formulaire multipage.

J'ai une forme "page" multiple. Ma forme mère est initialize comme ceci:

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

et de composants multiples/page Cette affiche conditionaly comme:

{(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 est une fonction qui appelle this.props.handleSubmit() et ajouter ou supprimer 1 à l'étape si le serveur répondre http 200.

Sur les composants <Motifs> par exemple j'initialise redux-form comme ceci:

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

Et pour chacun de mes composants de forme/pages que j'ai un certain bouton précédent/suivant comme ceci: <NavFormButton loading={loading} handleSubmit={handleSubmit} onSubmit={onSubmit}/>

Lorsque je clique ensuite je veux valider et soumettre le formulaire. Ça marche. Mais quand je vais précédent je veux juste soumettre les données afin qu'ils soient sauvegardés, mais ne veulent pas valider, car l'utilisateur peut ne pas remplir tous les champs.

Comment faire? Est-ce que je suis le bon chemin?

Avoir beaucoup de mal à comprendre comment faire cela correctement ... Merci.

Answer 1

Vous pouvez d'abord essayer de réinitialiser le formulaire avec les valeurs actuelles, soumettre, puis passer au formulaire précédent.

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

Voir plus here

Aussi, si vous utilisez v6, alors vous devriez regarder shouldAsyncValidate fonction pour exécuter la validation async lorsque vous en avez besoin. Officiel docs