如果模态中有未保存的更改,如何防止取消模态?

时间:2019-04-29 13:44:05

标签: angular modal-dialog ng-zorro-antd

我的Angular应用程序创建一个模态对话框,允许用户输入和更改某些属性。当用户试图取消模态时,请警告用户模型中未保存的更改(单击X,或在模态外部单击)。

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'))
    }
  }
});

在上面的代码中,“结果”不反映模态中的更改,因此不起作用。

实现它的最佳方法是什么?

2 个答案:

答案 0 :(得分:0)

如果有未保存的更改,您可以仅添加“确认”框警报。诸如bootbox确认之类的东西。

Bootbox use stackoverflow link

确保bootbox的z-index大于模式

答案 1 :(得分:0)

nzOnCancel是Component时,nzContent可以接受Component实例作为函数参数,此函数返回一个promise,当执行完成或promise结束时,它将自动关闭(返回false以防止关闭)。

您可以在此处查看在线示例:

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