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

Question

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

我使用 navCtrl.push 转到我要创建 POST.

的页面

我还使用了 formBuilder 的 Angular 表格 来构造我的 表格模型。

我该怎么做？

如果有人能提供帮助，我们将不胜感激。

Answer 1

我已经通过在提供者中创建一个函数来检查和循环 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();
      });
    }
  }

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

Ionic 3 how to cache unfinished form inputs when the page is leaved

caching

formbuilder

angularjs

ionic-framework

ionic3