使用Angular Reactive Forms遇异常：点击弹窗按钮触发表单提交

问题根源 #

在HTML标准中，<button>元素若未显式指定type属性，默认类型为submit。当这类按钮处于<form>标签内部时，点击会自动触发表单的提交事件，这就是你点击弹窗按钮时seeFormData被触发的原因。

解决方案 #

有两种可行的解决方式，推荐第一种更符合规范的实现：

1. 为弹窗按钮添加type="button"属性

明确将按钮标记为普通按钮，避免默认的表单提交行为。修改后的按钮代码如下：

<button
  pButton
  class="p-button btn"
  icon="pi pi-search"
  type="button"
  (click)="openModal()"
></button>

2. 在点击事件中阻止默认行为

如果无法修改按钮类型，可以在openModal方法中阻止事件的默认提交行为：

• 模板中传递事件对象：

<button
  pButton
  class="p-button btn"
  icon="pi pi-search"
  (click)="openModal($event)"
></button>

• 组件类中处理事件：

openModal(event: Event) {
  event.preventDefault(); // 阻止表单提交的默认行为
  this.display = true;
}

总结 #

优先选择第一种方案，显式指定按钮类型是HTML开发的最佳实践，能避免这类隐式行为导致的问题。

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