Alert controller input box validation

Question

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.

Answer 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

Answer 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;

Answer 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.