如何在离子中对警报警报输入进行验证？答案

【问题标题】：How to give validation for alert alert input in ionic?如何在离子中对警报警报输入进行验证？
【发布时间】：2018-05-16 20:28:55
【问题描述】：

我已经添加了一个警报输入字段来更改密码，但是我们如何在 ionic 中对输入字段进行验证？

account.ts

 changePassword(){
 let alert = this.alertCtrl.create({
   title: 'Change Password',
   buttons: [
    'Cancel']
 });

  alert.addInput({
  name: 'Password',
  value: this.password,
  placeholder: 'password'
  });
 alert.addButton({
    text: 'Ok',
    handler: (data: any) => {
    this.userData.setUsername(data.username);
    let accountData=new FormData();
    accountData.append('userid',this.userid),
    accountData.append('password',data.Password)
    this.works.changePassword(accountData).subscribe(res=>{
      console.log(res),
      err=>{
        console.log(err)
      }
      })
    }
   });
  alert.present();
   }

【问题讨论】：

标签： forms angular ionic-framework

【解决方案1】：

您可以使用alert.setMessage('text') 方法显示验证消息，并且不要忘记在验证后添加return false 以防止警报关闭。

public displayToAlert(title, subTitle) {
    let alert = this.alertCtrl.create({
      title: title,
      subTitle: subTitle,
      message: '',
      enableBackdropDismiss: false,
      inputs: [
        {name: 'userEmail',
      placeholder: 'Email Id'}
      ],
      buttons: [{
        text: 'Cancel',
        handler: () => {
        }
      },{
        text: 'Send',
        handler: datas => {
          if(datas.userEmail != null && datas.userEmail.length > 0){
            this.onExportNew();
          }else{
            alert.setMessage('<b style="color: red;">Enter valid email id.</b>');
            return false;
          }
        }
      }]
    });
    alert.present();
  }

供参考：Alert controller input box validation

【讨论】：