Set/preserve Angular reactive form values after browser back button

Question

I am trying to create an Angular (10) reactive form that accepts user input, performs some processing, and then transfer the user to another URI. I am trying to support the case where the user is directed to that other URI and then presses the browser back button, intending to make a change to a form field, before submitting the form again. It is desirable that the user not be required to entirely re-key the form; I would like to take advantage of browser default behaviour of re-populating fields with the values that were there before the user left the page.

The problem I am encountering is that the browser re-populates the form, but that the Angular model of the form is not being re-populated. The result of this is that if the user presses the submit button again, the values are all the default values.

I would like to somehow read the values that the browser re-populated in the form into the Angular model when the user accesses the page via the back button, so that the model is consistent with the UI.

app.component.html:

<form [formGroup]="frm" (submit)="submit()">
    <p *ngIf="errorMessage">{{ errorMessage }}</p>
    <label>
        Test input:
        <input type="text" form="frm" formControlName="test" />
    </label>
    <button type="submit">Submit</button>
</form>

app.component.ts:

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'SO question';

  errorMessage: string;

  frm: FormGroup;

  constructor(private readonly formBuilder: FormBuilder) {

  }

  ngOnInit(): void {
      this.frm = this.formBuilder.group({
          test: ['', Validators.required]
      });
  }

  submit() {
      if (this.frm.invalid) {
          this.errorMessage = 'Form is invalid';
          return;
      }

      window.location.href = 'https://google.com';
  }
}

In this example, if the user fills in the form with the value "aaa", and submits, they will be directed to Google. If they press the back button, the form field will display the value "aaa", but if they press submit again they will get a validation error that the form is invalid, because the input field is required, and the model's value for the field is its initial value (empty string).

Gopal Gopal · Accepted Answer · 2020-09-17T14:03:09

check not popstate event before reinitializing the formgroup in ngOninit

constructor(private route: Router) {}

ngOnInit(){
 this.route.events
  .pipe(filter((event) => event instanceof NavigationStart))
  .subscribe((event: NavigationStart) => {
    if (!event.restoredState) {
      this.frm = this.formBuilder.group({
          test: ['', Validators.required]
      });
    }
  });
}

Set/preserve Angular reactive form values after browser back button

1 Answers