如何让type为reset的按钮点击时既清空表单又执行自定义方法

下面提供两种可直接落地的实现方式，均满足「先清空表单字段，再执行自定义方法」的需求：

方案1：绑定表单reset事件（推荐） #

原生type="reset"的按钮点击后，会先自动清空所属表单的所有字段，再触发表单的reset事件，因此直接把自定义方法绑定到表单的reset事件上即可。
代码示例：

<form (reset)="resetView()">
  <!-- 此处放置你的所有表单控件 -->
  <button type="reset">Reset</button>
</form>

resetView(){
  // 执行到这里时表单已经完成自动清空，直接写自定义逻辑即可
  // Some method
}

方案2：普通按钮手动触发重置 #

如果你需要使用type="button"的普通按钮，可以在自定义方法中先主动调用表单原生的reset()方法清空字段，再执行后续逻辑。
代码示例：

<form #myForm>
  <!-- 此处放置你的所有表单控件 -->
  <button (click)="resetView(myForm)" type="button">Reset</button>
</form>

resetView(form){
  // 先执行表单原生重置逻辑，清空所有字段
  form.reset();
  // 再执行自定义逻辑
  // Some method
}

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