如何在submit按钮上调用函数且不影响原有表单提交功能

submit按钮的click事件绑定的Aoba()函数存在提前返回值的逻辑，直接阻断了表单默认提交行为：

• 函数执行时只要走到显隐判断分支，就会执行return this.fill = true/false，给click事件返回布尔值，直接拦截按钮原生的submit提交动作，函数末尾的console.log永远不会触发，表单也无法正常提交。
• 原函数的布尔值切换逻辑冗余，不需要多层if判断。

方案1：直接修改现有绑定逻辑（改动最小） #

调整Aoba()函数逻辑，移除会阻断提交的return返回值，简化显隐切换逻辑：

Aoba(){
  // 直接对布尔值取反即可完成显隐状态切换
  this.fill = !this.fill
  console.log(this.fill)
}

修改后函数不会给click事件返回任何拦截默认行为的值，点击按钮会先执行显隐切换，再正常触发表单提交。

特殊场景说明：如果后续需要做表单校验，校验不通过要拦截提交时，只需要在校验失败的分支单独加return false，正常流程不要返回任何值即可。

方案2：遵循框架规范绑定事件（更推荐，适配更多提交场景） #

从模板语法判断你用的是Angular框架，不建议把提交相关逻辑绑定在submit按钮的click事件上，应该把统一提交逻辑绑定到<form>标签的ngSubmit事件上，覆盖点击按钮、输入框按回车等所有触发表单提交的场景：

<!-- 表单标签绑定统一提交方法 -->
<form (ngSubmit)="handleFilterSubmit()">
  <!-- 其他筛选项代码省略 -->
  <div class="col-6">
    <button type="submit" class="btn btn-primary-color w-100">{{'Filtrar' | translate}}</button>
  </div>
</form>

组件类中对应的提交方法：

handleFilterSubmit() {
  // 触发div显隐切换
  this.Aoba()
  // 执行筛选查询的业务逻辑，比如传参、请求接口等
  // this.getFilterResult()
}

这种写法不会出现默认事件冲突的问题，逻辑收敛更易维护。

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