How to prevent cancel modal if there is unsaved changes in the modal?

Question

My Angular app creates a modal dialog to allow user to input and change some properties. It is requested to warn user that there is unsaved changes in the model when user tries to cancel the modal (click X, or click outside of the modal).

const modal = this.modalService.create({
  nzTitle: title,
  nzContent: MyModalComponent,
  nzComponentParams: {
      // component parameters
  },
  nzFooter: null,
  nzOnCancel: (result) => {
    if (result changed) {
      return;
    } else {
      return new Promise((resolve, reject) => {
         this.modalService.confirm({
           nzTitle: `If you leave, your unsaved changes will be lost. Do you want to leave?`,
           nzOkText: 'Yes',
           nzOkType: 'danger',
           nzOnOk: () => resolve(true),
           nzCancelText: 'No',
           nzOnCancel: () => resolve(false),
         });
       }).catch(() => console.log('cancel'))
    }
  }
});

In the above code, the "result" does not reflect the changes in the modal, therefore it does not work.

What is the best way of achieving it?

score 0 · Answer 1 · answered Apr 29 '19 at 13:58

0

You can just add a Confirm box alert if there is any unsaved changes. Something like bootbox confirm.

Bootbox use stackoverflow link

Make sure the z-index of bootbox is more than that of modal

answered Apr 29 '19 at 13:58

Adrita Sharma

21,581
10
69
79

score 0 · Answer 2 · answered May 18 '19 at 06:08

The nzOnCancel can accept the Component instance as the function arguments when nzContent is Component, this function returns a promise, which is automatically closed when the execution is complete or the promise ends (return false to prevent closing).

You can check out the online example here:

https://stackblitz.com/edit/ng-zorro-antd-start-rd9gqh

How to prevent cancel modal if there is unsaved changes in the modal?

2 Answers2