Angular表单提交取消问题：按钮需同时提交表单并路由跳转

看起来你遇到的问题是：表单内的按钮想同时完成表单提交和路由跳转，但目前这两个操作可能存在冲突——比如路由跳转先触发，导致表单提交的异步操作被中断，或者两者的默认行为互相干扰。我来给你几个靠谱的解决方案：

方案1：提交成功后手动跳转（推荐） #

这是最稳妥的方式，确保表单提交的异步操作（比如API请求）完成后，再执行路由跳转，避免操作中断。

步骤： #

1. 移除按钮上的routerLink，把按钮改成纯提交按钮：

<button type="submit">提交并跳转</button>

2. 在组件中注入Router服务，用于手动控制路由：

import { Router } from '@angular/router';
import { YourDataService } from '../services/your-data.service'; // 假设你的数据服务

constructor(
  private router: Router,
  private dataService: YourDataService
) {}

3. 修改saveChanges()方法，在提交成功后执行跳转：

saveChanges() {
  // 先校验表单有效性
  if (this.forma.invalid) {
    return;
  }

  // 执行表单提交的异步操作（比如调用后端API）
  this.dataService.submitForm(this.forma.value).subscribe({
    next: (response) => {
      console.log('表单提交成功', response);
      // 提交成功后跳转到目标组件
      this.router.navigate(['/your-target-route']);
    },
    error: (error) => {
      console.error('表单提交失败', error);
      // 这里可以添加错误提示，比如弹窗或页面提示
    }
  });
}

这种方式能保证表单提交的逻辑完全执行完毕后，再进行路由跳转，不会出现操作中断的问题。

方案2：阻止默认行为（仅适合同步提交场景） #

如果你的表单提交是同步操作（几乎很少见），可以通过控制事件的默认行为来让两个操作同时生效，但不推荐用于异步提交的场景：

代码示例： #

<form [formGroup]="forma" (ngSubmit)="saveChanges()">
  <!-- 表单内容 -->
  <button 
    type="submit" 
    routerLink="/your-target-route"
    (click)="handleSubmitClick($event)"
  >
    提交并跳转
  </button>
</form>

组件中的方法：

handleSubmitClick(event: Event) {
  // 如果saveChanges是同步的，这里可以先执行提交逻辑
  this.saveChanges();
  // 注意：如果是异步提交，这里的路由跳转还是会先执行，导致组件销毁，异步操作失败
}

额外注意点： #

• 永远明确指定按钮的type属性：在表单内的按钮，type="submit"用于触发表单提交，type="button"用于普通按钮，避免浏览器默认行为的混乱。
• 如果你的表单提交不需要等待结果（不推荐），可以考虑在ngSubmit中同时调用跳转，但同样要注意异步操作的问题。

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