typescript - Ako zabrániť používateľovi odoslať formulár viackrát? v Angular

Teraz mám funkciu, kde používateľ môže vytvoriť nové údaje a uložiť ich, ak údaje už existujú, zobrazí sa modálne okno ako

Teraz po tom, ako používateľ klikne na tlačidlo uložiť, bude to odoslané a kým je požiadavka stále v stave čakajúceho spracovania alebo načítavania, existuje tendencia, že používateľ znovu klikne na tlačidlo a zobrazí sa upozornenie „Údaje už existujú, chcete pokračovať v ukladaní?“ čo nechcem.

Ako vidíte na snímke obrazovky nižšie, požiadavka je stále čakajúca a načítava sa, takže ak používateľ klikne znova, ten pop-up sa opäť zobrazí. Ako to vieme vyriešiť pomocou Angularu? Máte nejaký dobrý nápad, ktorý by mohol pomôcť? Ďakujem.

#Uložiť útržok údajov

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

#KÓD, KTORÝ SKÚMA EXISTUJÚCE ÚDAJE

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

Odpoveď č. 1

Možno budete chcieť počas spracovania požiadavky deaktivovať tlačidlo a/alebo na ňom zobraziť načítavací indikátor. Takto používateľ uvidí, že sa stále spracováva, a už nebudete mať tento problém, čo je lepšie z pohľadu používateľskej skúsenosti.

Odpoveď č. 2

Pridajte nejakú vlajku, ktorá sa prepne pred a po nahraní

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