使用ionic2的警报消息

Question

当我单击注册按钮时，如果我输入要进入重新申请页面的所有字段，则会收到一条消息，例如填写所有必填字段。

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

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);

    }

Answer 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");
    }
  }

}

Answer 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!");
     }
   }
}

Answer 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");
   }
 }

}