如何防止用户多次提交表单？在角度答案

【问题标题】：How to prevent user from submitting form multiple times ? in angular如何防止用户多次提交表单？在角度
【发布时间】：2020-06-22 18:26:08
【问题描述】：

现在我有一个功能，用户可以创建新数据并保存它，如果数据存在，则会弹出一个模式

现在，在用户单击保存按钮后，它将被提交，而当请求仍处于待处理或加载状态时，用户可能会再次单击该按钮，并且“数据已经存在要继续保存吗？”会再次弹出，我不想。

正如您在下面的屏幕截图中看到的那样，请求仍处于等待状态并正在加载，因此如果用户再次单击该弹出窗口将再次显示。我们如何使用 angular 解决这个问题？有什么好主意可能会有所帮助吗？谢谢。

#保存数据sn-p

listenToSaveEvent(): void {
    this.saveSubject
      .asObservable()
      .pipe(
        filter((v) => !!v),
        debounceTime(1e3)
      )
      .subscribe(() => {
 
        if (this.respondents.length === 1) {
          return this.checkExistingData();

#检查现有数据的代码

checkExistingData(): void {
    const test = this.formService.checkExisting(this.form)
    .subscribe(res => {
      if (res ) {
        const createExistingSub = this.confirmDialogService.open(
          ERROR_MESSAGES."Data already exists wanna proceed on saving?"
        )
          .componentInstance
          .confirmed
          .subscribe((confirmed) => {
            if (confirmed) {
              return this.createDATA();
            }

            createExistingSub.unsubscribe();
      });
      } else {
          return this.createDATA();
      }
  });

【问题讨论】：

您可以禁用点击按钮并在 api 的订阅中启用返回。
简单解决方案：禁用按钮或使其在按下时消失。完成。

标签： angular typescript

【解决方案1】：

您可能希望在处理请求时禁用按钮并\或在其上放置加载程序。这样，用户将看到它仍在处理中，并且您不会再遇到这个问题，从用户体验的角度来看会更好。

【讨论】：

【解决方案2】：

添加一些会在上传前后切换的标志

`listenToSaveEvent(): void {
    if (this.isUploading) { return;}  // do nothing while uploading
    this.isUploading = true;
    this.saveSubject
      .asObservable()
      .pipe(
        filter((v) => !!v),
        debounceTime(1e3),
        finally(() => this.isUploading === false)   // no matter if it's success or error
      )
      .subscribe(() => {
 
        if (this.respondents.length === 1) {
          return this.checkExistingData();`

【讨论】：