Angular中HostListener在formGroup内触发异常问题咨询

触发click事件的根源 #

这不是Angular @HostListener的异常行为，而是浏览器的原生默认机制：当表单（<form>）内部存在按钮时，若未明确指定按钮的type属性，浏览器会默认将其识别为type="submit"类型。此时在表单内的输入框按下Enter键，浏览器会自动触发表单的提交逻辑，同时模拟点击表单内的第一个提交按钮，进而触发你指令中监听的click事件。

这个行为和Angular的FormGroup无关，是浏览器为提升表单易用性设计的默认交互规则。

解决方法 #

你可以通过以下几种方式解决这个问题：

• 给按钮指定明确的type="button"：
  这是最直接的方案，明确告诉浏览器该按钮不是提交按钮，按下Enter时就不会触发它的点击事件：

  <button appYourDirective type="button">按钮</button>
  

• 阻止表单的默认提交行为：
  如果你的表单不需要默认提交功能，可以在<form>标签上通过ngSubmit阻止默认行为：

  <form [formGroup]="yourFormGroup" (ngSubmit)="$event.preventDefault()">
    <!-- 表单内容 -->
  </form>
  

• 调整提交按钮优先级（若需保留提交功能）：
  如果你需要按钮作为提交按钮，但不想让Enter键触发它，可以在表单内添加一个隐藏的type="submit"按钮放在最前面，这样浏览器会优先触发隐藏按钮的点击，而非你的目标按钮：

  <form [formGroup]="yourFormGroup">
    <button type="submit" style="display: none;"></button>
    <button appYourDirective type="submit">目标按钮</button>
  </form>
  

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