How would you implement saving partially filled forms when navigating between routes?
Eg. User starts filling a form, but decides to navigate to a different route and then go back to original the form.
In usual case, when component is destroyed, all data already filled are lost, so I need to store them somehow when leaving the route.
I'm looking for a generic solution for all forms in the application.
All my forms have:
constructor(private fb: FormBuilder, private router: Router) {
this.form = fb.group({
...
I tried to create RouteGuard
implementing CanDeactivate
interface.
This allowed me to hook to component unload event, and see the component.form.pristine
state and eventually store the component.form.value
to localStorage
.
So now all the forms in the application using this guard are saving their values to the local storage.
The next step would be to load the data from this storage when components having forms are created.
I'm looking to attach to something what is being called for each component after it's constructor.
I could use resolvers, but in my application I'm not using them in general (I prefer to see the layout part to be visible + progress indicator).
Maybe I could extend FormBuilder
?
What is the usual pattern in this common case?