Prevent Alert from closing if condition is not satisfied

I have an alert dialog with an input text field. It requires the user to input his PIN before proceeding. If the PIN entered by the user is correct then the dialog box will disappear. If the PIN entered by the user is wrong then the dialog box should not disappear. Now, the problem is, when the user entered a wrong PIN, the dialog box still disappears. How can I prevent the alert box from closing if the condition was not satisfied or if the PIN is wrong?

Her is my code:

            this.alertCtrl.create({
              title: 'Verify it\'s you',
              message: 'Please enter your PIN for verification purposes.',
              inputs: [
                {
                  name: 'pin',
                  type: 'number',
                  placeholder: 'PIN',
                }
              ],
              buttons: [
                {
                  text: 'OK',
                  handler: (data) => {
                    if (data['pin'] != this.pin) {
                      this.toastSrvc.presentToast('Invalid PIN!');
                      // DON'T CLOSE THE ALERT
                    }
                  }
                }
              ],
              enableBackdropDismiss: false
            }).present();

I hope someone can help me with this. Thank you :blush:

If a handler returns false then the alert will not automatically be dismissed when the button is clicked.

1 Like