首页 > 解决方案 > 在 Angular 中存储/恢复路径更改时的部分表单值

问题描述

在路线之间导航时,您将如何实现保存部分填写的表格?

例如。用户开始填写表格,但决定导航到不同的路线,然后返回原始表格。

通常情况下,当组件被销毁时,所有已经填充的数据都会丢失,所以我需要在离开路由时以某种方式存储它们。

我正在为应用程序中的所有表单寻找通用解决方案。

我所有的表格都有:

  constructor(private fb: FormBuilder, private router: Router) {
    this.form = fb.group({
 ...

我试图创建RouteGuard实现CanDeactivate接口。
这使我能够挂钩组件卸载事件,并查看component.form.pristine状态并最终存储component.form.valuelocalStorage.

所以现在应用程序中使用这个守卫的所有表单都将它们的值保存到本地存储中。

下一步是在创建具有表单的组件时从该存储中加载数据。

我正在寻找在构造函数之后为每个组件调用的东西。

我可以使用解析器,但在我的应用程序中我一般不使用它们(我更喜欢看到布局部分是可见的+进度指示器)。

也许我可以延长FormBuilder
在这种常见情况下,通常的模式是什么?

标签: angularformslocal-storageangular-router-guardsangular-resolver

解决方案


推荐阅读