How to keep redux-form submission errors after switching from a wizard-form “piece” to another?
I have a wizard form that is separated in 4 different routes. The user can submit the form on any of the 4 wizard steps.
When I receive the field errors from the server, I put them on redux-store using "stopSubmit" action creator (tried using setSubmitFailed too, but I didn't get the difference it made). After that dispatch, the field errors are shown correctly on every field.
However, when I switch to any of the other steps/pages, the "@@redux-form/INITIALIZE" action occurs automatically and all the submission errors I put before are deleted from the store.
How can I keep them when switching routes/forms?
reactjs redux redux-form
asked Nov 23 '18 at 12:53
Leoni Murilo de LimaLeoni Murilo de Lima
364
add a comment |
I have a wizard form that is separated in 4 different routes. The user can submit the form on any of the 4 wizard steps.
When I receive the field errors from the server, I put them on redux-store using "stopSubmit" action creator (tried using setSubmitFailed too, but I didn't get the difference it made). After that dispatch, the field errors are shown correctly on every field.
However, when I switch to any of the other steps/pages, the "@@redux-form/INITIALIZE" action occurs automatically and all the submission errors I put before are deleted from the store.
How can I keep them when switching routes/forms?
reactjs redux redux-form
asked Nov 23 '18 at 12:53
Leoni Murilo de LimaLeoni Murilo de Lima
364
add a comment |
I have a wizard form that is separated in 4 different routes. The user can submit the form on any of the 4 wizard steps.
When I receive the field errors from the server, I put them on redux-store using "stopSubmit" action creator (tried using setSubmitFailed too, but I didn't get the difference it made). After that dispatch, the field errors are shown correctly on every field.
However, when I switch to any of the other steps/pages, the "@@redux-form/INITIALIZE" action occurs automatically and all the submission errors I put before are deleted from the store.
How can I keep them when switching routes/forms?
reactjs redux redux-form
asked Nov 23 '18 at 12:53
Leoni Murilo de LimaLeoni Murilo de Lima
364
I have a wizard form that is separated in 4 different routes. The user can submit the form on any of the 4 wizard steps.
When I receive the field errors from the server, I put them on redux-store using "stopSubmit" action creator (tried using setSubmitFailed too, but I didn't get the difference it made). After that dispatch, the field errors are shown correctly on every field.
However, when I switch to any of the other steps/pages, the "@@redux-form/INITIALIZE" action occurs automatically and all the submission errors I put before are deleted from the store.
How can I keep them when switching routes/forms?
reactjs redux redux-form
reactjs redux redux-form
asked Nov 23 '18 at 12:53
Leoni Murilo de LimaLeoni Murilo de Lima
364
asked Nov 23 '18 at 12:53
Leoni Murilo de LimaLeoni Murilo de Lima
364
asked Nov 23 '18 at 12:53
Leoni Murilo de LimaLeoni Murilo de Lima
364
asked Nov 23 '18 at 12:53
Leoni Murilo de LimaLeoni Murilo de Lima
364
asked Nov 23 '18 at 12:53
Leoni Murilo de LimaLeoni Murilo de Lima
364
364
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
I guess you're looking for destroyOnUnmount: false.
Specify the destroyOnUnmount: false flag to preserve form data across form component unmounts.
export default reduxForm({
destroyOnUnmount: false
})(Form)
Also you may pass forceUnregisterOnUnmount: true, because here's what the docs says:
Whether or not to force unregistration of fields -- use in conjunction with destroyOnUnmount. Useful for wizard-type forms where you want to destroy fields as they unmount, but not the form's state. Defaults to false, as forms are normally unregistered on unmount.
Here's a complete example, where the errors are kept across the different wizard forms (steps).
answered Nov 23 '18 at 13:57
Jordan EnevJordan Enev
6,6432146
I actually have both flags set the way you explained, but the submission errors are still being lost when I change the form component that is being shown. I also have initialValues being set their mapStateToProps. By checking the redux dev tools I saw that the action "@@redux-form/INITIALIZE" happens when I switch to a form page and this action is the one that simply deletes my submission errors.
– Leoni Murilo de Lima
Nov 23 '18 at 15:48
It's strange! Did you check the complete wizard example I mentioned? There, if you successfully submit the step 1, after that submit the step 2 with failures and the errors are shown, go back to step 1, and finally go again to step 2, then the errors are still kept. I guess you want to achieve the same behavior. Therefore please follow the example. If it doesn't help you - please provide a working code example (jsfiddle, sandbox), that will help us to support you. Good luck! :)
– Jordan Enev
Nov 23 '18 at 16:06
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53447113%2fhow-to-keep-redux-form-submission-errors-after-switching-from-a-wizard-form-pie%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
I guess you're looking for destroyOnUnmount: false.
Specify the destroyOnUnmount: false flag to preserve form data across form component unmounts.
export default reduxForm({
destroyOnUnmount: false
})(Form)
Also you may pass forceUnregisterOnUnmount: true, because here's what the docs says:
Whether or not to force unregistration of fields -- use in conjunction with destroyOnUnmount. Useful for wizard-type forms where you want to destroy fields as they unmount, but not the form's state. Defaults to false, as forms are normally unregistered on unmount.
Here's a complete example, where the errors are kept across the different wizard forms (steps).
answered Nov 23 '18 at 13:57
Jordan EnevJordan Enev
6,6432146
I actually have both flags set the way you explained, but the submission errors are still being lost when I change the form component that is being shown. I also have initialValues being set their mapStateToProps. By checking the redux dev tools I saw that the action "@@redux-form/INITIALIZE" happens when I switch to a form page and this action is the one that simply deletes my submission errors.
– Leoni Murilo de Lima
Nov 23 '18 at 15:48
It's strange! Did you check the complete wizard example I mentioned? There, if you successfully submit the step 1, after that submit the step 2 with failures and the errors are shown, go back to step 1, and finally go again to step 2, then the errors are still kept. I guess you want to achieve the same behavior. Therefore please follow the example. If it doesn't help you - please provide a working code example (jsfiddle, sandbox), that will help us to support you. Good luck! :)
– Jordan Enev
Nov 23 '18 at 16:06
add a comment |
I guess you're looking for destroyOnUnmount: false.
Specify the destroyOnUnmount: false flag to preserve form data across form component unmounts.
export default reduxForm({
destroyOnUnmount: false
})(Form)
Also you may pass forceUnregisterOnUnmount: true, because here's what the docs says:
Whether or not to force unregistration of fields -- use in conjunction with destroyOnUnmount. Useful for wizard-type forms where you want to destroy fields as they unmount, but not the form's state. Defaults to false, as forms are normally unregistered on unmount.
Here's a complete example, where the errors are kept across the different wizard forms (steps).
answered Nov 23 '18 at 13:57
Jordan EnevJordan Enev
6,6432146
I actually have both flags set the way you explained, but the submission errors are still being lost when I change the form component that is being shown. I also have initialValues being set their mapStateToProps. By checking the redux dev tools I saw that the action "@@redux-form/INITIALIZE" happens when I switch to a form page and this action is the one that simply deletes my submission errors.
– Leoni Murilo de Lima
Nov 23 '18 at 15:48
It's strange! Did you check the complete wizard example I mentioned? There, if you successfully submit the step 1, after that submit the step 2 with failures and the errors are shown, go back to step 1, and finally go again to step 2, then the errors are still kept. I guess you want to achieve the same behavior. Therefore please follow the example. If it doesn't help you - please provide a working code example (jsfiddle, sandbox), that will help us to support you. Good luck! :)
– Jordan Enev
Nov 23 '18 at 16:06
add a comment |
I guess you're looking for destroyOnUnmount: false.
Specify the destroyOnUnmount: false flag to preserve form data across form component unmounts.
export default reduxForm({
destroyOnUnmount: false
})(Form)
Also you may pass forceUnregisterOnUnmount: true, because here's what the docs says:
Whether or not to force unregistration of fields -- use in conjunction with destroyOnUnmount. Useful for wizard-type forms where you want to destroy fields as they unmount, but not the form's state. Defaults to false, as forms are normally unregistered on unmount.
Here's a complete example, where the errors are kept across the different wizard forms (steps).
answered Nov 23 '18 at 13:57
Jordan EnevJordan Enev
6,6432146
I guess you're looking for destroyOnUnmount: false.
Specify the destroyOnUnmount: false flag to preserve form data across form component unmounts.
export default reduxForm({
destroyOnUnmount: false
})(Form)
Also you may pass forceUnregisterOnUnmount: true, because here's what the docs says:
Whether or not to force unregistration of fields -- use in conjunction with destroyOnUnmount. Useful for wizard-type forms where you want to destroy fields as they unmount, but not the form's state. Defaults to false, as forms are normally unregistered on unmount.
Here's a complete example, where the errors are kept across the different wizard forms (steps).
answered Nov 23 '18 at 13:57
Jordan EnevJordan Enev
6,6432146
edited Nov 23 '18 at 14:03
answered Nov 23 '18 at 13:57
Jordan EnevJordan Enev
6,6432146
answered Nov 23 '18 at 13:57
Jordan EnevJordan Enev
6,6432146
answered Nov 23 '18 at 13:57
Jordan EnevJordan Enev
6,6432146
6,6432146
I actually have both flags set the way you explained, but the submission errors are still being lost when I change the form component that is being shown. I also have initialValues being set their mapStateToProps. By checking the redux dev tools I saw that the action "@@redux-form/INITIALIZE" happens when I switch to a form page and this action is the one that simply deletes my submission errors.
– Leoni Murilo de Lima
Nov 23 '18 at 15:48
It's strange! Did you check the complete wizard example I mentioned? There, if you successfully submit the step 1, after that submit the step 2 with failures and the errors are shown, go back to step 1, and finally go again to step 2, then the errors are still kept. I guess you want to achieve the same behavior. Therefore please follow the example. If it doesn't help you - please provide a working code example (jsfiddle, sandbox), that will help us to support you. Good luck! :)
– Jordan Enev
Nov 23 '18 at 16:06
add a comment |
I actually have both flags set the way you explained, but the submission errors are still being lost when I change the form component that is being shown. I also have initialValues being set their mapStateToProps. By checking the redux dev tools I saw that the action "@@redux-form/INITIALIZE" happens when I switch to a form page and this action is the one that simply deletes my submission errors.
– Leoni Murilo de Lima
Nov 23 '18 at 15:48
It's strange! Did you check the complete wizard example I mentioned? There, if you successfully submit the step 1, after that submit the step 2 with failures and the errors are shown, go back to step 1, and finally go again to step 2, then the errors are still kept. I guess you want to achieve the same behavior. Therefore please follow the example. If it doesn't help you - please provide a working code example (jsfiddle, sandbox), that will help us to support you. Good luck! :)
– Jordan Enev
Nov 23 '18 at 16:06
I actually have both flags set the way you explained, but the submission errors are still being lost when I change the form component that is being shown. I also have initialValues being set their mapStateToProps. By checking the redux dev tools I saw that the action "@@redux-form/INITIALIZE" happens when I switch to a form page and this action is the one that simply deletes my submission errors.
– Leoni Murilo de Lima
Nov 23 '18 at 15:48
I actually have both flags set the way you explained, but the submission errors are still being lost when I change the form component that is being shown. I also have initialValues being set their mapStateToProps. By checking the redux dev tools I saw that the action "@@redux-form/INITIALIZE" happens when I switch to a form page and this action is the one that simply deletes my submission errors.
– Leoni Murilo de Lima
Nov 23 '18 at 15:48
It's strange! Did you check the complete wizard example I mentioned? There, if you successfully submit the step 1, after that submit the step 2 with failures and the errors are shown, go back to step 1, and finally go again to step 2, then the errors are still kept. I guess you want to achieve the same behavior. Therefore please follow the example. If it doesn't help you - please provide a working code example (jsfiddle, sandbox), that will help us to support you. Good luck! :)
– Jordan Enev
Nov 23 '18 at 16:06
It's strange! Did you check the complete wizard example I mentioned? There, if you successfully submit the step 1, after that submit the step 2 with failures and the errors are shown, go back to step 1, and finally go again to step 2, then the errors are still kept. I guess you want to achieve the same behavior. Therefore please follow the example. If it doesn't help you - please provide a working code example (jsfiddle, sandbox), that will help us to support you. Good luck! :)
– Jordan Enev
Nov 23 '18 at 16:06
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53447113%2fhow-to-keep-redux-form-submission-errors-after-switching-from-a-wizard-form-pie%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
