title: Set/preserve Angular reactive form values after browser back button
body: <p>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.</p>
  <p>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.</p>
  <p>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.</p>
  <p>app.component.html:</p>
  <pre><code>&lt;form [formGroup]=&quot;frm&quot; (submit)=&quot;submit()&quot;&gt;
      &lt;p *ngIf=&quot;errorMessage&quot;&gt;{{ errorMessage }}&lt;/p&gt;
      &lt;label&gt;
          Test input:
          &lt;input type=&quot;text&quot; form=&quot;frm&quot; formControlName=&quot;test&quot; /&gt;
      &lt;/label&gt;
      &lt;button type=&quot;submit&quot;&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  <p>app.component.ts:</p>
  <pre><code>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';
    }
  }
  </code></pre>
  <p>In this example, if the user fills in the form with the value &quot;aaa&quot;, and submits, they will be directed to Google. If they press the back button, the form field will display the value &quot;aaa&quot;, 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).</p>