fix(module:modal): buttons cannot disable when confirm mode (#3707)

* fix(module:modal): buttons cannot disable when confirm mode close #3679 * fix: fix build
NG-ZORRO · Jul 15, 2019 · 3847250 · 3847250
1 parent c11ca9b
commit 3847250
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 3 deletions.
diff --git a/components/modal/nz-modal.component.html b/components/modal/nz-modal.component.html
@@ -112,10 +112,20 @@
         </div>
       </div>
       <div class="ant-modal-confirm-btns">
-        <button nz-button *ngIf="nzCancelText!==null" (click)="onClickOkCancel('cancel')" [nzLoading]="nzCancelLoading">
+        <button *ngIf="nzCancelText!==null"
+          nz-button
+          (click)="onClickOkCancel('cancel')"
+          [nzLoading]="nzCancelLoading"
+          [disabled]="nzCancelDisabled">
           {{ cancelText }}
         </button>
-        <button *ngIf="nzOkText!==null" #autoFocusButtonOk nz-button [nzType]="nzOkType" (click)="onClickOkCancel('ok')" [nzLoading]="nzOkLoading">
+        <button #autoFocusButtonOk
+          *ngIf="nzOkText!==null"
+          nz-button
+          (click)="onClickOkCancel('ok')"
+          [nzType]="nzOkType"
+          [nzLoading]="nzOkLoading"
+          [disabled]="nzOkDisabled">
           {{ okText }}
         </button>
       </div>

diff --git a/components/modal/nz-modal.component.ts b/components/modal/nz-modal.component.ts
@@ -86,7 +86,7 @@ export class NzModalComponent<T = any, R = any> extends NzModalRef<T, R>
   @Input() nzBodyStyle: object;
   @Input() nzOkText: string | null;
   @Input() nzCancelText: string | null;
-  @Input() nzOkType = 'primary';
+  @Input() nzOkType: string = 'primary';
   @Input() nzIconType: string = 'question-circle'; // Confirm Modal ONLY
   @Input() nzModalType: ModalType = 'default';
 

diff --git a/components/modal/nz-modal.spec.ts b/components/modal/nz-modal.spec.ts
@@ -317,6 +317,17 @@ describe('modal testing (legacy)', () => {
       ids.forEach(id => expectModalDestroyed(id, false));
     }));
 
+    it('should disable buttons', fakeAsync(() => {
+      const modalRef = instance.createDisabledModal();
+      fixture.detectChanges();
+      flush();
+      fixture.detectChanges();
+      const buttons = modalRef.getElement().querySelectorAll('.ant-modal-confirm-btns button') as NodeListOf<
+        HTMLButtonElement
+      >;
+      buttons.forEach(button => expect(button.disabled).toBe(true));
+    }));
+
     it('should render content with component', fakeAsync(() => {
       const modalRef = instance.createCustomContentWithComponent();
       const modalElement = modalRef.getElement();
@@ -931,6 +942,13 @@ export class TestConfirmModalComponent {
       nzContent: TestConfirmCustomComponent
     });
   }
+
+  createDisabledModal(): NzModalRef {
+    return this.modalService.confirm({
+      nzCancelDisabled: true,
+      nzOkDisabled: true
+    });
+  }
 }
 
 @Component({