从不完整的开始返回时显示警报或模式

Question

我创建了一个包含用户名字段和保存按钮的表单。如果我们在用户名字段中输入内容并单击返回按钮而不保存它，我的表单应该显示一个警报框或模式窗口，询问您真的要离开页面吗？

我找到了这篇文章，但需要更通用的东西。

形式.html

<ion-header>
<ion-navbar>
<ion-title> Data </ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<form (ngSubmit)="dataForm(data)" #data="ngForm">
<ion-item>
<ion-input type="text" name="name" #name="ngModel" required></ion-input>
</ion-item>
<button ion-button large type="submit">Save</button>
<form>
</ion-content>

我正在使用ionic2打字稿和angular2。

Answer 1

当用户尝试离开页面时ionViewCanLeave()可以使用生命周期挂钩来显示警报，如下所示：

public canLeave: boolean = false; // Create a property in your component
ionViewCanLeave(){
  if(!thiscanLeave){ // IF canLeave IS FALSE ENTER THE IF STATEMENT TO CONFIRM IF THE USER WANTS TO LEAVE THE PAGE. IF IT'S TRUE RETURN TRUE SAYING IT CAN LEAVE.
    if(confirm("Do you really want to leave?")){
      this.canLeave = true; // YOU'LL NEED TO SET YOUR PROPERTY TO TRUE WHENEVER YOU NEED TO LEAVE THE PAGE, BEEING A POP, PUSH OR SETROOT.
      this.navCtrl.pop();
    };
  };
  return true;
}

这样，它将始终检查用户是否可以离开页面。

由于您没有使用 Angular 的 FormBuilder 来检查用户是否在您的表单中输入了某些内容(您只想警告用户是否有不完整的表单，如果它没有键入任何内容，则无需提醒他(您可以创建一个简单的函数，将您的canLeave设置为 false，如下所示：

你。TS

public canLeave: boolean = true;

您的网页

<ion-item>
<ion-input type="text" name="name" #name="ngModel" required(input)="canLeave = false"></ion-input>

希望这有帮助。