时间戳

首页 > 解决方案 > Ionic 3如何在页面离开时缓存未完成的表单输入

angularjs - Ionic 3如何在页面离开时缓存未完成的表单输入

问题描述

有没有办法在页面离开时缓存未完成的表单？当我转到表单时，突然我尝试在每个输入字段上放置一些数据，当我离开该页面时，输入字段被清除。

我曾经navCtrl.push去那个我想创建POST的页面。

我还使用formBuilderAngular表单来构建我的表单模型。

我怎样才能做到这一点？

感谢有人可以提供帮助。

标签： angularjscachingionic-frameworkionic3formbuilder

解决方案

我通过在提供程序中创建一个函数来检查和循环通过 formBuilder 对象解决了这个问题。如果一个字段具有现有值，则如果用户想离开，则会弹出警报控制器。如果没有，它将继续离开页面。

下面是代码：

在您的页面中

async ionViewCanLeave() {
    const formObj = this.form.value
    if (!this.done) await this.alertMsg.allowUserToLeaveForm(formObj)
  }

在提供者中

allowUserToLeaveForm(formObject) {
    const lengthChecker = formObject
    const vals = Object.keys(lengthChecker).map((key) => lengthChecker[key].length)
    const checkArr = vals.some(field => field > 0)
    if (checkArr) {
      return new Promise((resolve, reject) => {
        const confirm = this.alertCtrl.create({
          subTitle: 'Are you sure you want to leave the page?',
          title: 'Your changes will not be saved',
          enableBackdropDismiss: false,
          buttons: [
            {
              text: 'No',
              handler: () => {
                reject();
              }
            },
            {
              text: 'Yes',
              handler: () => {
                resolve();
              }
            }
          ]
        });
        confirm.present();
      });
    }
  }

推荐阅读