typescript - 如何防止用戶在 Angular 中多次提交表單？

現在我有一個功能，使用者可以創建新資料並保存，如果資料已存在，將會彈出一個模態窗口，如下所示

現在用戶點擊保存按鈕後，資料會被提交，而在請求仍在等待或加載時，用戶往往會再次點擊該按鈕，然後“資料已存在，是否要繼續保存？”會再次彈出，而這不是我想要的。

所以如你在下面的截圖中所見，請求仍在等待和加載中，所以如果用戶再次點擊，它的彈出窗口將再次顯示。我們如何使用 Angular 來解決這個問題？有什麼好的建議可以幫助嗎？謝謝。

#儲存資料片段

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();
      }
  });

答案＃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();`