在浏览器后退按钮后设置/保留 Angular 反应式表单值

Question

我正在尝试创建一个 Angular (10) 响应式表单，它接受用户输入、执行一些处理，然后将用户转移到另一个 URI。我试图支持用户被定向到另一个 URI 然后按下浏览器后退按钮的情况，打算在再次提交表单之前对表单字段进行更改。最好不要要求用户完全重新输入表单；我想利用浏览器默认行为，使用用户离开页面之前的值重新填充字段。

我遇到的问题是浏览器重新填充表单，但表单的 Angular 模型没有被重新填充。这样做的结果是，如果用户再次按下提交按钮，这些值都是默认值。

当用户通过后退按钮访问页面时，我想以某种方式将浏览器在表单中重新填充的值读取到 Angular 模型中，以便模型与 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';
  }
}

在此示例中，如果用户使用值“aaa”填写表单并提交，他们将被定向到 Google。如果他们按下后退按钮，表单字段将显示值“aaa”，但如果他们再次按下提交，他们将收到表单无效的验证错误，因为输入字段是必需的，并且该字段的模型值是它的初始值（空字符串）。

Answer 1

在 ngOninit 中重新初始化表单组之前检查 not popstate 事件

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]
      });
    }
  });
}