Search code examples
angulartypescriptionic-frameworkionic2ionic3

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.


Solution

  • 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

    enter image description here