CODEWITHSUNDEEP
angular
Niko
Niko

Reputation: 185

Maintain form values ​when redirecting and going back in the browser, in angular

In my program to perform a search, a form is completed (using reactive form), when submitting, a json is created with the filters and redirected to another page, sending the filters as a parameter. On the other page, a rest service is used to finally show the results.

The problem occurs when the user clicks on the "back" button of the browser. When returning to the previous page, the filters are not maintained in the form. There is some way to ensure that these filters are maintained

Upvotes: 0

Views: 3676

Answers (2)

Niko
Niko

Reputation: 185

As suggested by Haytam95, use parameters (rather queryParams). But instead of redirecting to the same page, I make two redirects. In the first I use replaceURL, to replace the empty form. This way when I go back, I get the form with the last filter.

this.router.navigate([],
      {
        queryParams: {filters: btoa(JSON.stringify(filter)), page: 0 },
        relativeTo: this.activatedRoute,
        queryParamsHandling: 'merge',
        replaceUrl: true
       }).then(
        () => {
          this.router.navigate(['/pages/fallos/list'], { queryParams: {filters: btoa(JSON.stringify(filter)), page: 0 } });
        }
       );

Upvotes: 1

Haytam95
Haytam95

Reputation: 307

How about Router parameters? It makes your page bookmarkable and is friendly with back and forward browser buttons.

http://localhost:4200/filter?input1=someData&input2=anotherData

When you send your form, you could also redirect to the same page with parameters.

Here is a nice article about it

So, if your users click "back" once, they'll be at the search form with the filters. If they click "back" again, they'll be in the empty form.

if you don't want use Router parameters, you could save the data in localStorage or sessionStorage and refill the filters ngOnInit

export class Something implements OnInit {

   ngOnInit() {

      if(localStorage.getItem('search') !== undefined) {
         const filters = JSON.parse(localStorage.getItem('search'));
         // Do someting with it
      }
   }

   search(searchParams) {

      // Save your filters before redirect
      localStorage.setItem('search', JSON.stringify(searchParams));

      // Your code
   }
}

Upvotes: 1

Related Questions