Confirm Dialog appear two twice

Question

I'm using primeng in my project. I have a mat-tab with the same component inside the both, this component is a form with a button that when I press shows a confirm dialog. The problem is, when I press the button to show de confirm dialog, appears in both tab. How can I resolve this issue?

    confirmPrinting(event: Event) {
      this.confirmationService.confirm({
          target: event.target as EventTarget,
          message: 'Are you sure with' + this.printSelected +'?',
          header: 'Confirmación',
          icon: 'pi pi-exclamation-triangle',
          acceptIcon:"none",
          rejectIcon:"none",
          rejectButtonStyleClass:"p-button-text",
          accept: () => {
               this.messageService.add({ key: 'tc',severity: 'info', summary: 'Confirm', detail: 'Starting print...' });
             
          },
          reject: () => {
              this.messageService.add({ severity: 'error', summary: 'Cancel', detail: 'Print canceled', life: 3000 });
          }
      });
  }

This is the html:

<button type="submit" class="btn mat-btn" [disabled]="printDisabled" (click)="confirmPrinting($event)"><mat-icon class="tab-icon">print</mat-icon></button>

I would like the confirmation dialog to only appear once, I need them to be independent.

Answer 1

Since

<p-confirmDialog></p-confirmDialog>

is part of app-print component and it is included twice, then when you call confirmation.confirm it will trigger the confirm dialog to be opened in both of the components, so you got twice.

Remove <p-confirmDialog> from app-print ad add it to the main component.

Answer 2

Not sure you doing something like this.

calling the onSave on (ngSubmit) and from the button.

<form #form1="ngForm" *ngIf="organizationHierarchyItem" (ngSubmit)="onSave()">
<button type="submit" (click)="onSave()" class="btn btn-primary btn-sm margin-btn">Save</button>
</form>