使用ionic2的警报消息

时间:2016-09-07 16:54:39

标签: angular typescript ionic2

当我点击注册按钮时,如果我输入所有要进入regsuccess页面的字段,我会收到一条消息,例如填写所有必需的字段。

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

HTML:

QFile("/home/mythicsr/test");

.ts文件:

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

3 个答案:

答案 0 :(得分:2)

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

}

答案 1 :(得分:0)

要显示警报,您可以使用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!");
     }
   }
}

答案 2 :(得分:0)

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

}