CODEWITHSUNDEEP
angulartypescriptionic-frameworkionic3
Sampath
Sampath

Reputation: 65978

Keep the the alert box without dismiss if there is an error

This is just an alert box with radio buttons. All are working fine except one thing. That is If there is an error I cannot retain the alert box until the user enters the correct data. According to the doc I have used return false feature. But no luck yet. Any clue?

Note: This is working fine if inputs are text boxes. Here I need radio buttons.

const allApiKeys = await this.apiKeySqliteProvider.getAllApiKeys();
            const alert = this.alertCtrl.create();
            alert.setTitle('Select Api Key');
            forEach(allApiKeys, (apiKey: ApiKey) => {
              alert.addInput({
                type: 'radio',
                label: apiKey.name,
                value: apiKey.key,
                checked: false
              });
            });
            alert.addButton({
              text: 'Cancel',
              role: 'cancel',
              handler: data => {
                this.loading.dismissLoader(loading);
              }
            });
            alert.addButton({
              text: 'OK',
              handler: data => {
                let navTransition = alert.dismiss();
                navTransition.then(() => {
                 if (data == null) {
                    this.showToastProvider.showErrorToast("Invalid API Key");
                    this.loading.dismissLoader(loading);
                    return false;
                  } 
                });
                return false;
              }
            });
            alert.present();
          }

Upvotes: 1

Views: 415

Answers (1)

dhavalcengg
dhavalcengg

Reputation: 4713

return false is not the actual problem. You are calling alert.dismiss, that's the issue. If you don't want to hide alert, you should move dismiss code inside else block.

Please change your code to following 

 const allApiKeys = await this.apiKeySqliteProvider.getAllApiKeys();
                const alert = this.alertCtrl.create();
                alert.setTitle('Select Api Key');
                forEach(allApiKeys, (apiKey: ApiKey) => {
                  alert.addInput({
                    type: 'radio',
                    label: apiKey.name,
                    value: apiKey.key,
                    checked: false
                  });
                });
                alert.addButton({
                  text: 'Cancel',
                  role: 'cancel',
                  handler: data => {
                    this.loading.dismissLoader(loading);
                  }
                });
                alert.addButton({
                  text: 'OK',
                  handler: data => {
                      if (data == null) {
                        this.showToastProvider.showErrorToast("Invalid API Key");
                        this.loading.dismissLoader(loading);
                        return false;
                      }

                      // you don't need else here as by default it will hide alert
                  }
                });
                alert.present();
              }

Upvotes: 1

Related Questions