Angular按钮异常：点击Edit触发Next跳转行为排查

原因1：按钮未指定type="button"，默认触发表单提交 #

如果这些按钮被包裹在<form>标签内，浏览器会将<button>元素默认识别为type="submit"。点击Edit按钮时会触发表单提交事件，若表单的提交逻辑与Next按钮的goToNext跳转逻辑绑定，就会引发意外跳转。

原因2：display: contents导致布局错乱，按钮点击区域重叠 #

Edit按钮所在的父div设置了style="display: contents"，该属性会让父元素的布局容器消失，子按钮直接成为.row的子元素。而Bootstrap的.row依赖.col类控制网格布局，失去.col包裹后，Edit按钮的布局会混乱，可能与Next按钮的点击区域重叠，导致点击Edit时实际触发了Next按钮的点击事件。

原因3：事件冒泡（排查方向） #

若包含Edit按钮的某个父元素意外绑定了goToNext事件，点击Edit按钮时事件会向上冒泡到父元素，触发跳转逻辑（从你提供的代码看此情况不存在，但可作为补充排查点）。

解决方案 #

针对原因1：添加type="button"属性 #

明确指定按钮类型为button，避免默认的submit行为：

<button class="btn next-btn float-center" type="button" (click)="enableEditing()">Edit</button>

Next按钮也建议同步添加，避免潜在问题：

<button class="btn next-btn float-right error" type="button" (click)="goToNext(undefined)" role="button">Next</button>

针对原因2：调整布局样式 #

移除Edit按钮父div的display: contents样式，确保.col类正常生效，同时移除无意义的href属性（div标签不支持该属性）：

<div class="card-footer-center col">
    <button class="btn next-btn float-center" type="button" (click)="enableEditing()">Edit</button>
</div>

针对原因3：阻止事件冒泡（若排查到父元素绑定事件） #

在Edit按钮的点击事件中添加$event.stopPropagation()，阻止事件向上冒泡：

<button class="btn next-btn float-center" type="button" (click)="enableEditing(); $event.stopPropagation()">Edit</button>

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