How to keep dialogs showed up and alert nativescript

Question

hi guys i am working on forget password in mobile app using nativescript, and i want to show alert message when the user insert wrong email or wrong apssword in the dialog , but i couldn't make it is there any body can help ?

 let options: PromptOptions = {
                        title: "Entrez votre nouveau mot de passe",
                        okButtonText: "Suivant",
                        cancelButtonText: "Annuler",
                        cancelable: true,
                        inputType: inputType.password,
                        capitalizationType: capitalizationType.none
                      }; prompt(options).then((pass: PromptResult) => {
                        if (pass.text && pass.result == true) {
                          let options: PromptOptions = {
                            title: "Entrez votre nouveau mot de passe de nouveau",
                            okButtonText: "Suivant",
                            cancelButtonText: "Annuler",
                            cancelable: true,
                            inputType: inputType.password,
                            capitalizationType: capitalizationType.none
                          }; prompt(options).then((pass2: PromptResult) => {
                            if (pass2.text && pass2.result == true) {
                              if (pass.text == pass2.text) {
                                this.auth.resetMDP(this.email, this.code, pass2)
                                  .then((res: any) => {
                                    if (res.message == 'OK')
                                      alert('votre mot de passe a été changé avec succès')
                                  }).catch((err: any) => { alert(err); })
                              } else alert("re-entrez le mot de passe correctement s'il vous plait");
                            }
                          })
                        }
                      });

because i ve tried to make it work , but the dialog always close

Answer 1

In my apps I use modals to handle custom dialog styling and special action (as you require validation without closing the dialog). The easiest is:

This is how you call it:

page.showModal(
  "you/path/to/modal/directory",
  {
    // your binding context
  },
  () => {
     // on close callback
  }
);

Assume that you have modal layout as XML and code behind (in my case Typescript):

<Page xmlns:RL="nativescript-ripple" xmlns="http://schemas.nativescript.org/tns.xsd" shownModally="onShownModally" >
<DockLayout stretchLastChild="false">
    <Label dock="top" text="Hello Modal!!" horizontalAlignment="center" />
    <TextView dock="top" text="{{ message }}" fontSize="15sp" horizontalAlignment="left" />
    <Button dock="bottom" text="OK" tap="onOkTap" />
</DockLayout>

let closeCallback: () => void;

export function onShownModally(args: any) {
  const page: Page = <Page>args.object;
  const context = args.context;
  // your close callback logic that you passed 
  closeCallback = args.closeCallback;
  // bind you context object to modal
  page.bindingContext = fromObject(context);
}

export function onOkTap(args: EventData) {
  const page = args.object as Page;
  if (closeCallback !== null && closeCallback !== undefined) {
    closeCallback();
  } else {
    page.closeModal();
  }
}