mat-date-range-input在表单内按Enter触发按钮点击问题求助

方法1：给按钮设置明确的type属性 #

表单内的按钮默认type为submit，浏览器会在表单内按下回车时自动触发第一个submit按钮的点击事件。只需给按钮显式设置type="button"，就能规避这个默认行为：

<button type="button" (click)="openEdit()">编辑</button>

方法2：在日期输入框上阻止回车的默认行为 #

如果无法修改按钮类型，或者第一种方案不生效，可以给mat-date-range-input绑定keydown.enter事件，调用preventDefault()阻止浏览器的表单提交默认行为——注意这里用preventDefault()而非stopPropagation()，因为问题根源是浏览器的默认表单行为，不是事件冒泡：

<mat-date-range-input (keydown.enter)="$event.preventDefault()">
  <input matStartDate placeholder="开始日期">
  <input matEndDate placeholder="结束日期">
</mat-date-range-input>

方法3：全局阻止表单的默认提交行为 #

如果整个表单不需要通过回车触发提交，可以直接给<form>标签绑定submit事件并阻止默认行为：

<form (submit)="$event.preventDefault()">
  <!-- 你的日期选择器和按钮代码 -->
</form>

内容的提问来源于stack exchange，提问作者Sergey Ch.