Angular表单中图片按钮触发onSubmit方法异常求助

这问题我之前也碰到过，核心原因出在按钮的默认行为上：

• 在HTML表单中，<button>元素如果没有明确指定type属性，浏览器会默认把它识别为type="submit"类型的按钮
• 所以你点击这些头像选择按钮时，不仅执行了user.avatar = img的赋值操作，还会触发表单的ngSubmit事件，进而调用onSubmit方法

解决办法 #

给所有选择头像的按钮加上type="button"属性，明确告诉浏览器这只是一个普通按钮，不会触发表单提交：

修改后的按钮代码：

<button type="button" class="btn btn-light alignCenter" (click)="user.avatar = img">
  <img class="card-img-top" [src]="'/assets/images/' + img + '.png'" alt="Card image cap">
</button>

这样修改后，点击头像按钮就只会给user.avatar赋值，不会再触发表单的提交逻辑了。

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