版权声明:本文为博主原创文章,未经博主允许不得转载。 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>