警报控制器输入框验证

Question

如何验证和显示Ionic 2或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
                        }
                    }
        }
      ]
    });

有人已经更新了警报控制器,并确实拉动了Ionic团队的请求.我认为Ionic团队规划将来会实现这一点. https://github.com/ionic-team/ionic/pull/12541

我需要一些解决此验证功能的方法.

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

感谢您的帮助.

Answer 1

此时此功能尚未实现.您可以看到此Git问题.

我在Toast这里使用了通知,我没有从我的客户那里得到任何投诉:)

这就是我所做的.

警告boxe的done处理程序:

{
          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;
            }
          }
        }

吐司方法是这样的:

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

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

    toast.present();
  }

UI

Answer 2

我确实通过使用setMessage方法找到了解决方法.最初消息将为空,当用户未输入任何值时,将在单击时填写验证消息.找到下面的代码段

let prompt = Alert.create({
  title: 'Alert input validation',
  message: '',
  inputs: [ 
    {
      name: 'email',
      placeholder: 'email'
    },
  ],
  buttons: [
    {
      text: 'Save',
      handler: data => {
                    let validateObj = this.validateEmail(data);
                    if (!validateObj.isValid) {
                        prompt.setMessage('Your validation message');
                        return false;
                    } else {
                        //make HTTP call
                    }
                }
    }
  ]
});

您可以覆盖variable.scss文件中的消息字体,如下所示

$alert-md-message-text-color:red;