在浏览器返回按钮后设置/保留角度反应形式值

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';
}
}

在这个例子中，如果用户用值"0"填写表单；aaa"；，并提交，他们将被引导到谷歌。如果他们按下后退按钮，则表单字段将显示值"0"；aaa"；，但是，如果他们再次按下submit，他们将得到一个验证错误，即表单无效，因为输入字段是必需的，并且该字段的模型值是其初始值(空字符串(。

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