Wait for Subscription result before closing alertController

Ionic Framework
#1

I have an alertController where the user has to type in the value.
When clicking on ‘Save’, I’m checking if the input value is valid by subscribing to an Observable.
If the value is invalid, I need to prevent closing the alert - if it’s valid, clicking ‘save’ should close the alert.

I know I can prevent closing the alert onclick via ‘return false’, although that doesn’t work when subscribing to an Observable.

Here’s my code:

const alert = await this.alertController.create({
   header: 'Input your value',
        inputs: [
          {
            name: 'my_input',
            type: 'text',
            placeholder: 'Input your value'
          }
        ],
        buttons: [
          {
            text: 'Discard',
            role: 'cancel',
            cssClass: 'secondary',
            handler: () => {
              console.log('Confirm Cancel');
            }
          }, {
            text: 'Save',
            handler: (alertData) => {
              
              // Check if input value is valid
              this.checkValue(alertData.my_input).subscribe(result => {
                  if (result) {
                     // We can close the alert because input is valid
                  } else {
                     // Do not close alert, instead display error message because input is not valid
                  }
              });
            }
          }
        ]
      });

      await alert.present();

Does anybody know how to solve this?

#2

i created a PR for that some while ago, sadly it’s not merged yet: feat(alert): accept Promise for button handler by EinfachHans · Pull Request #22518 · ionic-team/ionic-framework · GitHub

In the meantime you can change your code to like this:

this.alertController.create({
   header: 'Input your value',
   inputs: [
       {
          name: 'my_input',
          type: 'text',
          placeholder: 'Input your value'
        }
    ]
}).then((alert) => {
    alert.buttons = [
          {
            text: 'Discard',
            role: 'cancel',
            cssClass: 'secondary',
            handler: () => {
              console.log('Confirm Cancel');
            }
          }, {
            text: 'Save',
            handler: (alertData) => {
              
              // Check if input value is valid
              this.checkValue(alertData.my_input).subscribe(result => {
                  if (result) {
                     alert.dismiss();
                  } else {
                  
                  }
              });
            }
          }
        ];

alert.present();
});

Written on my smartphone so maybe not 100% correct code but i think it’s clear what i do here. First create the Alert, than assign the buttons, so you can use the Alert Element in the Button Handler. Than present the Alert.

Edit

Also add return false to the Button handler to not close the Alert automatically

#3

Thanks for the quick reply, although it doesn’t solve my problem.
Using ‘return false’ inside the subscription result is never called, I guess that’s the main problem.

#4

Do not return it from within the subscription. Retun it after the subscribe.

1 Like