NG-ZORRO / ng-zorro-antd

Angular UI Component Library based on Ant Design
https://ng.ant.design
MIT License
8.87k stars 3.94k forks source link

nzOkLoading is not working in NzModalService.confirm() #7180

Closed merih-sakarya closed 2 years ago

merih-sakarya commented 2 years ago

Reproduction link

https://stackblitz.com/edit/ng-zorro-antd-ivy-2p6wxs?file=src/app/app.component.ts

Steps to reproduce

this.modal.confirm({
      nzTitle: 'Do you Want to delete these items?',
      nzContent:
        'When clicked the OK button, this dialog will be closed after 3 second',
      nzOkLoading: isLoading,
      nzOnOk: () =>
        new Promise((resolve, reject) => {
          isLoading = true;
          setTimeout(() => {
            isLoading = false;
            console.log('Stop button loading!');
          }, 3000);
        }).catch(() => {
          console.log('Oops errors!');
        }),
});

What is expected?

My expectation is as follows; After the modal is opened, the user clicks the OK button, the button loading is started, and then the API request is made. If an error is received from the API request, the button loading will complete, but the modal should not be closed. (The modal closes when I reject or resolve.) If the API request completes successfully, the button loading is complete and the modal is closed.

What is actually happening?

nzOkLoading is not working correctly. It doesn't detect the change in Promise.

Environment Info
ng-zorro-antd 12.1.1
Browser Crome Version 96
chenc041 commented 2 years ago

Please try this

showConfirm(): void {
    let isLoading = false;
    this.confirmModal = this.modal.confirm({
      nzTitle: 'Do you Want to delete these items?',
      nzContent:
        'When clicked the OK button, this dialog will be closed after 3 second',
      nzOkLoading: isLoading,
      nzOnOk: () =>
        new Promise((resolve, reject) => {
          isLoading = true;
          setTimeout(() => {
            isLoading = false;
            this.confirmModal?.updateConfig({
              nzOkLoading: isLoading
            })
            console.log('Stop button loading!', isLoading);
          }, 3000);
        }).catch(() => {
          console.log('Oops errors!');
        }),
    });
  }
merih-sakarya commented 2 years ago

@chenc041 Thanks It worked 👍