Angular卡片清空按钮未绑定函数却触发卡片翻回问题求解

问题原因 #

两个层级的问题共同导致了该现象：

• 第一，HTML规范中，位于<form>标签内的<button>如果没有显式指定type属性，默认值为submit。也就是说你点击这个Clear按钮时，会默认触发表单的提交事件，而你在form标签上绑定了(submit)="toggleFlipBack()"，所以会直接调用翻回正面的方法。
• 第二，点击事件存在冒泡机制，就算你阻止了表单提交，Clear按钮的点击事件会向上冒泡到外层的.tp-box节点，该节点绑定了(click)事件处理函数，若后续你将翻转逻辑修改为状态切换，也会触发异常翻转。

解决方案 #

按顺序修改即可：

1. 给Clear按钮显式指定type="button"，避免默认触发表单提交，同时绑定清空处理函数：

<button type="button" (click)="clearForm($event)">Clear</button>

2. 在ts文件中新增清空方法，阻止事件冒泡的同时处理表单清空逻辑：

clearForm(e: Event) {
  e.stopPropagation();
  // 此处补充你的表单清空逻辑，例如重置所有输入控件的值
}

3. 可选优化：你已经在form上绑定了submit事件触发翻回，不需要再给submit输入框单独绑定click事件，删掉(click)="toggleFlipBack()"即可，避免逻辑重复执行。

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