HI how can save or store the state/step in mat-stepper ,when i refresh the page it come from initial step/beginning

manoj sahni 0
Viewed 25

I have put many reative form on mat-steps in angular 12 but it comes in initial step on refresh page,how can i save the state whereas i refresh the page,any idea?

enter image description here

 <mat-stepper labelPosition="bottom" linear  #stepper>
    <mat-step [stepControl]="selForm"></mat-step>
    <mat-step [stepControl]="indentityGrp" [editable]="isEditable"></mat-step>
    <mat-step [stepControl]="address" [editable]="isEditable2" class="border"></mat-step>
    <mat-step [stepControl]="member" [editable]="isEditable3"></mat-step>
</mat-stepper>
mat-stepper angular
1 Answers

Option 1: send it to the server and store the temporary form data there and fetch it on every app initialize.

Option 2: save on localStorage something like :

this.form.valueChanges.subscribe(data => localStorage.setItem('form', data))

and in your component

ngOnInit() {
   this.form.fetchData(localStorage.getItem('form'))
}
Eli Porush0
Related