1

Part of the application I am building is a multi step form/apply flow and I need to prevent the user from going back to the previous step on some routes. What is the best way to do this?

I've come across lots of SO questions that address this with canDeactivate but these basically just warn the use that going back will make you lose your information (Warn user of unsaved changes before leaving page)

How can I stop the angular router from routing if the user hits the browser back button. Or, is this the wrong design pattern and I should treat backward navigation differently?

Is this an acceptable solution? On the component you want to prevent backwards navigation on, add this to ngonInit

history.pushState(null, null, location.href);
    window.onpopstate = function(event) {
     history.go(1);
};
Anthony
  • 2,330
  • 8
  • 44
  • 64
  • 1
    This is more UX concern rather than a technical problem I believe, you should ask the user which option they want. But you should not force the user to do something (in many cases). Your part is only to warn them about the consequences and not choosing instead of them. For instance: "if you go back this and that will happen and you will lose your changes." – Danial Kalbasi Oct 10 '17 at 15:33
  • @DanielKalbasi I agree that this is mostly a UX concern. However, some of my routes have components that automatically kick off posts or puts. If a user goes backwards those calls will error out. I suppose I can add logic that if a certain condition is already met, don't trigger the calls. Or, should the backend drive this and return a certain response code if that action has already taken place. I could then use that response code to either message to user that this step is complete, OR use the response to know whether or not to do the posts or puts. – Anthony Oct 10 '17 at 17:37
  • 1
    Yes, you can control the flow by your rest APIs. But still, you may need to maintain the state of the request on your angular app. You can simply keep the user data/progress on localStorage and retrieve it if the user going back and forward, so you have a user data history. Your post and put methods also can trigger if this information is not available or meet a specific condition. – Danial Kalbasi Oct 11 '17 at 07:26

0 Answers0