feat(module:modal): support set nzOkDisabled and nzCancelDisabled (…

…#2856) close #1838
NG-ZORRO · Feb 1, 2019 · fa6a8e9 · fa6a8e9
1 parent 0e5c937
commit fa6a8e9
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 3 deletions.
diff --git a/components/modal/doc/index.en-US.md b/components/modal/doc/index.en-US.md
@@ -43,6 +43,8 @@ The dialog is currently divided into 2 modes, `normal mode` and `confirm box mod
 | nzClosable        | Whether a close (x) button is visible on top right of the modal dialog or not. <i>Invalid value in confirm box mode (default will be hidden)</i> | `boolean` | `true` |
 | nzOkLoading       | Whether to apply loading visual effect for OK button or not | `boolean` | `false` |
 | nzCancelLoading   | Whether to apply loading visual effect for Cancel button or not | `boolean` | `false` |
+| nzOkDisabled      | Whether to disable Ok button or not | `boolean` | `false` |
+| nzCancelDisabled  | Whether to disable Cancel button or not | `boolean` | `false` |
 | nzFooter          | Footer content, set as footer=null when you don't need default buttons. <i>1. Only valid in normal mode.<br>2. You can customize the buttons to the maximum extent by passing a `ModalButtonOptions` configuration (see the case or the instructions below).</i> | string<br>TemplateRef<br>ModalButtonOptions | OK and Cancel buttons |
 | nzGetContainer    | The mount node for Modal | HTMLElement / () => HTMLElement| A default container |
 | nzKeyboard        | Whether support press esc to close | `boolean` | `true` |

diff --git a/components/modal/doc/index.zh-CN.md b/components/modal/doc/index.zh-CN.md
@@ -44,6 +44,8 @@ title: Modal
 | nzClosable        | 是否显示右上角的关闭按钮。<i>确认框模式下该值无效（默认会被隐藏）</i> | `boolean` | `true` |
 | nzOkLoading       | 确定按钮 loading | `boolean` | `false` |
 | nzCancelLoading   | 取消按钮 loading | `boolean` | `false` |
+| nzOkDisabled      | 是否禁用确定按钮 | `boolean` | `false` |
+| nzCancelDisabled  | 是否禁用取消按钮 | `boolean` | `false` |
 | nzFooter          | 底部内容。<i>1. 仅在普通模式下有效。<br>2. 可通过传入 ModalButtonOptions 来最大程度自定义按钮（详见案例或下方说明）。<br>3. 当不需要底部时，可以设为 null</i> | string<br>TemplateRef<br>ModalButtonOptions | 默认的确定取消按钮 |
 | nzGetContainer    | 指定 Modal 挂载的 HTML 节点 | HTMLElement<br>() => HTMLElement| 默认容器 |
 | nzKeyboard        | 是否支持键盘esc关闭 | `boolean` | `true` |

diff --git a/components/modal/nz-modal.component.html b/components/modal/nz-modal.component.html
@@ -76,10 +76,10 @@
         >{{ button.label }}</button>
       </ng-container>
       <ng-container *ngSwitchDefault>
-        <button *ngIf="nzCancelText!==null" nz-button (click)="onClickOkCancel('cancel')" [nzLoading]="nzCancelLoading">
+        <button *ngIf="nzCancelText!==null" nz-button (click)="onClickOkCancel('cancel')" [nzLoading]="nzCancelLoading" [disabled]="nzCancelDisabled">
           {{ cancelText }}
         </button>
-        <button *ngIf="nzOkText!==null" nz-button [nzType]="nzOkType" (click)="onClickOkCancel('ok')" [nzLoading]="nzOkLoading">
+        <button *ngIf="nzOkText!==null" nz-button [nzType]="nzOkType" (click)="onClickOkCancel('ok')" [nzLoading]="nzOkLoading" [disabled]="nzOkDisabled">
           {{ okText }}
         </button>
       </ng-container>

diff --git a/components/modal/nz-modal.component.ts b/components/modal/nz-modal.component.ts
@@ -103,7 +103,8 @@ export class NzModalComponent<T = any, R = any> extends NzModalRef<T, R> impleme
   get cancelText(): string {
     return this.nzCancelText || this.locale.cancelText;
   }
-
+  @Input() @InputBoolean() nzOkDisabled: boolean = false;
+  @Input() @InputBoolean() nzCancelDisabled: boolean = false;
   @Input() @InputBoolean() nzCancelLoading: boolean = false;
   @Input() @Output() readonly nzOnCancel: EventEmitter<T> | OnClickCallback<T> = new EventEmitter<T>();
   @ViewChild('modalContainer') modalContainer: ElementRef;

diff --git a/components/modal/nz-modal.spec.ts b/components/modal/nz-modal.spec.ts
@@ -161,6 +161,8 @@ describe('modal testing (legacy)', () => {
       expect(isButtonLoading(getButtonCancel(modalElement))).not.toBeFalsy();
       expect(modalElement.querySelector('.ant-modal-close')).toBeFalsy();
       expect(modalElement.querySelector('.ant-modal-mask')).toBeFalsy();
+      expect(getButtonOk(modalElement).disabled).toBeFalsy();
+      expect(getButtonCancel(modalElement).disabled).toBeFalsy();
 
       // click ok button
       getButtonOk(modalElement).click();
@@ -690,6 +692,8 @@ class TestBasicServiceComponent {
       nzOkText: 'custom ok',
       nzOkType: 'success',
       nzOkLoading: false,
+      nzOkDisabled: false,
+      nzCancelDisabled: false,
       nzOnOk: () => { console.log('click ok'); return false; },
       nzCancelText: 'custom cancel',
       nzCancelLoading: true,

diff --git a/components/modal/nz-modal.type.ts b/components/modal/nz-modal.type.ts
@@ -35,6 +35,8 @@ export interface ModalOptions<T = any, R = any> { // tslint:disable-line:no-any
   nzOkText?: string;
   nzOkType?: string;
   nzOkLoading?: boolean;
+  nzOkDisabled?: boolean;
+  nzCancelDisabled?: boolean;
   nzOnOk?: EventEmitter<T> | OnClickCallback<T>; // Mixed using ng's Input/Output (Should care of "this" when using OnClickCallback)
   nzCancelText?: string;
   nzCancelLoading?: boolean;