Alert controller input box validation

问题

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.

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

Appreciate your help.

回答1:

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

回答2:

I did find a work around by using setMessage method. Initially message will be empty and when user has not entered any value the validation message will be filled up on click. Find the code snippet below

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

You can override the font of message in variable.scss file as below

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

回答3:

You can validate Email by using REGX.

here is sample. just replace this function with yours.

validateEmail(data) {
    if( /(.+)@(.+){2,}\.(.+){2,}/.test(data.email) ){
      return {
        isValid: true,
        message: ''
      };
    } else {
       return {
          isValid: false,
          message: 'Email address is required'
       }
    }
}

i hope this will help someone.

来源：https://stackoverflow.com/questions/45969821/alert-controller-input-box-validation