警报控制器输入框验证

警报控制器输入框验证

本文介绍了警报控制器输入框验证的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

如何在Ionic 2或3中的警报控制器中输入验证并显示错误

  let prompt = Alert.create( {
标题:'警报输入验证',
消息:我如何验证以下输入字段?,
输入:[
{
name:'email ',
占位符:'电子邮件'
},
],
按钮:[
{
text:'Save',
handler :data => {
let validateObj = this.validateEmail(data);
if(!validateObj.isValid){
alert(validateObj.message);
return false;
} else {
//拨打HTTP电话
}
}
}
]
});

有人已经更新了alertcontroller,并为Ionic团队做了拉取请求。我认为Ionic团队规划将来会实现这一点。


How to validate and show error for Input in Alert Controller in Ionic 2 or 3

let prompt = Alert.create({
      title: 'Alert input validation',
      message: "How can I validate below input field?",
      inputs: [
        {
          name: 'email',
          placeholder: 'email'
        },
      ],
      buttons: [
        {
          text: 'Save',
          handler: data => {
                        let validateObj = this.validateEmail(data);
                        if (!validateObj.isValid) {
                            alert(validateObj.message);
                            return false;
                        } else {
                            //make HTTP call
                        }
                    }
        }
      ]
    });

Some one already updated alertcontroller and did pull request for Ionic team. i think Ionic team planning implement this in future.https://github.com/ionic-team/ionic/pull/12541

I need some work around for this validation feature.

plnkrhttp://plnkr.co/edit/IBonfBJngky0h8UtMwMD?p=preview

Appreciate your help.

解决方案

At this moment this feature has not been implemented.You can see this Git issue.

I have used Toast notification here and I didn't get any complaint about it from my client :)

Here is what I have done.

alert boxe's done handler:

{
          text: 'Done',
          handler: (data) => {
            if (EmailValidator.isValid(data.email)) {
              if (this.data) {
                //my code
              } else {
                //my code
              }
              return true;
            } else {
              this.showErrorToast('Invalid Email');
              return false;
            }
          }
        }

Toast method is like this:

showErrorToast(data: any) {
    let toast = this.toastCtrl.create({
      message: data,
      duration: 3000,
      position: 'top'
    });

    toast.onDidDismiss(() => {
      console.log('Dismissed toast');
    });

    toast.present();
  }

UI

这篇关于警报控制器输入框验证的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-01 13:38