Angular Material Reactive Form内点击按钮触发全表单校验的原因及解决办法

HTML原生<form>标签内的按钮如果没有显式声明type属性，默认类型为submit。Angular响应式表单绑定formGroup后，会监听表单的submit事件，该事件触发时会自动执行全表单的规则校验，同时将表单的submitted状态置为true，因此点击表单内未指定type的按钮会触发校验。
位于form标签外的按钮不会触发表单的submit事件，因此不会触发校验。

• 方案1（最推荐）：给表单内部不需要触发提交校验的按钮显式设置type="button"，示例代码如下：

  <button type="button" mat-raised-button (click)="handleInnerBtnClick()">表单内部按钮</button>
  

  显式指定为普通按钮后，点击不会触发form的submit事件，也就不会触发自动校验。
• 方案2：在按钮的点击事件中手动阻止默认事件行为，示例代码如下：

  <button mat-raised-button (click)="handleInnerBtnClick(); $event.preventDefault()">表单内部按钮</button>
  

• 方案3：如果业务需要保留按钮的submit类型但不需要自动校验，可以在表单的ngSubmit事件绑定的处理逻辑中增加自定义校验逻辑，跳过Angular的默认校验触发规则。

内容的提问来源于stack exchange，提问作者Janos Vinceller