I work on an Angular application, where the user can fill out multiple (template driven) forms split up to multiple steps (1, 2, 3...). The user shall has the possibility to go back/forward (switching between the steps) allowing him to edit already filled-out information. So every time the user clicks next/previous the next or previous form is displayed.
I style dirty fields specifically to denote, which fields were changed already by the user. When the user switches between the steps the form is re-created/-rendered and the dirty state is missing - all the fields are pristine. I am searching for a possibility to back-up this information for every view when the user leaves it and restore when the user enters it.
So far I was not able to find anything out of the box. I was able to come up with a workaround by keeping forms in the DOM and use the hidden attribute to just hide it, but I would like to know whether there is a proper way to store and restore the dirty/pristine/touched state of a (template driven) form.
One possibility would be to traverse the form controls and for every FormControl store the dirty/touched information with the path (by path I mean the FormGroup and FormControl names when traversing the the form ) as key and than use this key to identify the particular FormControl and use markAsDirty() and markAsTouched() methods, but it kind of does not feel right doing it like this.