Angular中如何防止表单重复提交 实现表单仅提交一次功能

核心优化点 #

• 新增提交状态锁，拦截重复触发的提交请求
• 每次提交前清空历史预报数组，避免数据累加
• 表单提交按钮绑定禁用状态，从UI层面拦截重复操作

具体实现步骤 #

1. 组件类新增状态变量 #

在你的组件类中新增提交状态标识：

// 提交状态锁，初始为未提交状态
isSubmitting = false;
// 原有预报数组，确保初始值为空
searchedLocationForecast = [];

2. 改造onSubmit提交函数 #

onSubmit(form: NgForm) {
  // 提交中直接拦截请求，避免重复触发
  if (this.isSubmitting) return;
  // 开启提交锁
  this.isSubmitting = true;
  // 每次提交前清空旧的预报数据，避免累加溢出页面
  this.searchedLocationForecast = [];
  
  this.cityName = form.value.city;
  this.weatherService.getCurrentWeather(form.value.city).subscribe({
    next: (res) => {
      this.searchedLocationData = res;
    },
    error: (err) => {
      // 请求出错时解锁，允许重新提交
      this.isSubmitting = false;
      console.error('获取当前天气失败', err);
    }
  });

  this.weatherService.getForecast(form.value.city).subscribe({
    next: (res: any) => {
      for (let i = 0; i < res.list.length; i += 8) {
        this.searchedLocationForecast.push(res.list[i]);
      }
      console.log(this.searchedLocationForecast, "forecast");
    },
    error: (err) => {
      this.isSubmitting = false;
      console.error('获取预报失败', err);
    },
    complete: () => {
      // 所有逻辑处理完成后解锁，如果需要表单仅可提交一次，直接删除这行即可
      this.isSubmitting = false;
    }
  });
}

3. 模板层修改提交按钮 #

找到表单的提交按钮，添加禁用状态绑定，从UI层面拦截重复点击、回车触发的提交：

<button type="submit" [disabled]="isSubmitting">查询天气</button>

补充说明 #

如果需要实现表单仅可提交一次，提交后永久不可再次触发的需求，直接删除提交函数complete回调里的this.isSubmitting = false;代码即可，提交后状态锁会永久生效，不再响应任何提交操作。

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