Angular对话框取消按钮如何禁用表单校验实现一键关闭

问题根因 #

位于<form>标签内的button元素默认type属性值为submit，点击时会优先触发表单提交校验逻辑，因此首次点击取消按钮时会先执行表单校验，没有直接触发关闭方法。

修复方案（推荐） #

给取消按钮显式添加type="button"属性，明确标记该按钮为普通操作按钮，不会触发表单提交相关的校验逻辑，点击即可直接执行关闭方法：
修改后的HTML代码：

<button type="button" mat-button (click)="closeDialog()" mat-flat-button>Cancel</button>

可选替代方案 #

如果场景不允许修改按钮type属性，也可以在点击事件中主动阻止默认提交行为：

<button mat-button (click)="$event.preventDefault(); closeDialog()" mat-flat-button>Cancel</button>

以上两种方案修改后，点击取消按钮都可以直接关闭对话框，无需触发表单校验。

内容的提问来源于stack exchange，提问作者H Jafari