Angular 13表单回车键误触发错误按钮，如何设置默认触发Send按钮？

问题根源 #

HTML里的<button>元素默认类型为submit，你的Add、Remove按钮没指定type属性时，会被浏览器当作表单提交按钮。当用户在表单内按回车键，浏览器会优先触发第一个匹配的submit按钮，这就是Add按钮会响应回车的原因。

解决方案 #

1. 给非提交按钮设置type="button"
   给Add和Remove按钮明确指定类型为button，避免它们被识别为提交按钮：

   <!-- 修改后的Add按钮 -->
   <div class="col-md-2 offset-md-8">
       <button class="badge rounded-pill bg-secondary mt-2"
               type="button"
               (click)="addRow()">Add compound ingredient</button>
     </div>
   

   <!-- 修改后的Remove按钮 -->
   <div class="col-md-1"
        *ngIf="index > 0">
     <button class="badge rounded-pill bg-secondary mt-2"
             type="button"
             (click)="removeRow(index)">Remove</button>
   </div>
   

2. 正确配置Send按钮为表单默认提交按钮
   确保Send按钮在<form>标签内部，同时绑定表单的ngSubmit事件到getData()，并给按钮设置type="submit"：

   <!-- 外层表单容器 -->
   <form (ngSubmit)="getData()">
     <!-- 表单内其他内容 -->
     <div class="col-md-2 d-grid">
       <button class="btn btn-lg btn-danger"
               accesskey="s"
               tooltip="Alt-S"
               type="submit">Send</button>
     </div>
   </form>
   

   配置完成后，回车键会触发表单的ngSubmit事件，进而调用getData()，Send按钮作为唯一的提交按钮也能正常响应点击。

为什么之前加type="submit"没生效？ #

因为你的其他按钮默认是submit类型，浏览器优先触发了第一个出现的submit按钮（也就是Add按钮），所以即使Send按钮设置了type="submit"，也不会被优先触发。只有把其他按钮的类型改为button后，Send按钮才会成为表单唯一的提交按钮，回车键才会默认触发它。

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