使用 ionic2 的警报消息答案

【问题标题】：alert message using ionic2使用 ionic2 的警报消息
【发布时间】：2017-05-22 21:13:27
【问题描述】：

当我点击注册按钮时，如果我输入所有进入注册成功页面的字段，我会收到一条消息，比如填写所有必填字段。

但我想使用 ionic2 和 typescript 显示类似警报的消息。

html:

<button primary full (click)="register()" >Register</button>
     <p>{{regMsg}}</p>

.ts 文件：

 register(){
    var _this= this;

    // this.submitAttempt = true;

    if(!this.registrationForm.valid){
       _this.regMsg = "enter all required feilds";
    }
    else {
        console.log("success!")
        console.log(this.registrationForm.value);
        _this.navCtrl.setRoot(RegThankyouPage);

    }

【问题讨论】：

谁能帮我解决这个问题
使用toast可以弹出消息，但是在ionic2中如何使用，我不知道，如果有人知道ionic2中的toast，请给我建议
validation for register(sign up) button using ionic2的可能重复

标签： angular typescript ionic2

【解决方案1】：

import { AlertController } from 'ionic-angular'; // import alert controller

export class MyComponent {

  regMsg: string;

  constructor(public alertController: AlertController) {}

  showErrorMsg(msg) {
    let alert = this.alertCtrl.create({
      title: msg,
      subTitle: '10% of battery remaining',
      buttons: ['Dismiss']
    });
    alert.present();
  }

  register(){
    if (!this.registrationForm.valid) {
      this.regMsg = "enter all required feilds";
      console.log("form invalid");
      this.showErrorMsg(this.regMsg);
    } else {
      console.log("Valid form");
    }
  }

}

【讨论】：

【解决方案2】：

要显示警报，您可以使用 ionic2 中提供的警报组件以下是显示警报的方法：

import { AlertController } from 'ionic-angular';
export class RegistrationComponent{
   constructor(public alertController: AlertController) {
   }
   register(){
     if(!this.registrationForm.valid){
        let alert = this.alertController.create();
        alert.setTitle("Login Failed");
        alert.setSubTitle("Please fill-in all the fields");
        alert.addButton("Okay!");
     }
   }
}

【讨论】：

【解决方案3】：

 <button primary full (click)="register()" >Register</button>


**********************************************

import { AlertController } from 'ionic-angular'; // import alert  
controller

export class MyComponent {


 public alertCtrl: AlertController) {}

  showError(msg : string) {
    let alert = this.alertCtrl.create({
      title: 'Error',
      subTitle: msg,
      buttons: ['OK']
   });
    alert.present();
 }

 register(){
    if (!this.registrationForm.valid) {
          this.showError("enter all required fields");
    } else {
          console.log("Valid form");
   }
 }

}

【讨论】：