Angular实战记录---Ant Design自定义Modal页脚

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/WRian_Ban/article/details/87630645

背景

在Modal中设置了表单，通过Modal的OK按钮提交表单。但在提交表单之前会对表单内容进行检查，检查通过才允许提交，不通过的话则需要禁用OK按钮，用户要么修改表单内容使之合格，否则只能舍弃表单内容直接关闭模态框。

Angular+AntDesign之Modal

使用自定义的页脚按钮，当不符合提交时OK按钮进入 disabled状态，符合则可用。

<nz-modal
[(nzVisible)]="isVisible"
nzTitle="Edit Table"
···
[nzFooter]="modalFooter"
>
  <div>***Other content***<div>
  ···
  <ng-template #modalFooter>
    <button nz-button nzType="default" (click)="handleCancel()">Cancel</button>
    <button nz-button nzType="primary" (click)="handleOk()" [disabled]="!this.qualified">Ok</button>
  </ng-template>
  ···
</nz-modal>