即使我返回上一页，如何保持表单数据的填写?

Question

让我们假设，我有一个表单，其中包含名为：

Name, Id ,Address and MobileNo.

填写所有详细信息后，用户将移至下一页。

之后，如果我按返回按钮并移动到上一页，那么我希望已经填写了上次填写的数据。

如何使用 Angular JS？

Answer 1

您可以在Web 存储中或使用服务保留表单值。您需要做的是获取组件销毁生命周期挂钩上的表单值，并将其发送到服务或将其存储在 Web 存储中。

下面的解决方案是最简单的，因为服务存在于内存中并在实例的上下文中保持活动状态(例如，您所在的应用程序或浏览器选项卡(

服务网

@Injectable()
export class CacheService {
private formData: any;
constructor() { }
public setFormData(formData: any): void {
this.formData = formData;
}
public getFormData(): any {
return this.formData;  
}
}

组件.ts

@Component({
selector: 'app-test',
templateUrl: './template.html',
styleUrls: ['./styles.scss']
})
export class TestComponent implements OnInit, OnDestroy {
public form: FormGroup;
constructor(private cacheService: CacheService) {
}
ngOnInit() {
this.form.patchValue(
this.cacheService.getFormData();
);
}
public ngOnDestroy(): void {
this.cacheService.setFormData(this.form.value);
}
}