Prime-NG Confirm Dialog: Hide the Button after Confirmation

问题

I'm struggling with a problem using Angular and PrimeNG.

There is an Input Field for weight allowing numbers up to 150. If the typed in value is greater than 150, a Confirm Button appears below the Input Field.

If this button is clicked, the Confirm Dialog pops up, asking "Are you sure?". It contains two buttons to choose from, "Yes" and "No".

1.) Choosing "No" should close the Confirm Dialog and delete the previously typed-in value in the input field (this works). The Confirm Button shall vanish (fails).

2.) Choosing "Yes" should close the Confirm Dialog and leave the typed-in value (this works). Confirm button shall vanish (also fails).

Is it somehow possible to let the button disappear after the Confirm Dialog is closed?

test.component.html:

<div class="p-col-12 p-md-6 p-lg-5">
  Weight:
  <div class="ui-inputgroup">
    <input pInputText type="number" id="weight" name="weight" [(ngModel)]="newTest.testWeight"
           placeholder="---">
    <span class="ui-inputgroup-addon">kg</span>
  </div>

  <div *ngIf="validateIfWeightOutsideRange()">
    <div>
      <p-confirmDialog key="confirmWeightTest"></p-confirmDialog>
      <button type="button" (click)="confirmWeightTest()" pButton icon="pi pi-check"
              label="Please confirm!">
      </button>
      <p-messages [value]="messagesWeightTest"></p-messages>
    </div>
  </div>

</div>

test.component.ts

messagesWeightTest: Message[] = [];

  confirmWeightTest() {

    this.confirmationService.confirm({
      message: 'Are you sure?',
      header: 'Confirmation',
      icon: 'pi pi-exclamation-triangle',
      key: 'confirmWeightTest',
      accept: () => {
        this.messagesWeightTest = [{
          severity: 'info', summary: 'Confirmed', detail: 'The input is correct.'}];
      },
      reject: () => {
        this.sessionService.newTest.testWeight = null;
      }
    });
  }

Please note: The method "validateIfWeightOutsideRange()" works, therefore I think it's unnecessary to show it here.

Here is the link to PrimeNG's documentation: https://www.primefaces.org/primeng/#/confirmdialog

Maybe you have an idea?

回答1:

You can simply take one bool variable and set it on confirmDialog button click

messagesWeightTest: Message[] = [];

public weightConfirmed: boolean = false;

  confirmWeightTest() {

    this.confirmationService.confirm({
      message: 'Are you sure?',
      header: 'Confirmation',
      icon: 'pi pi-exclamation-triangle',
      key: 'confirmWeightTest',
      accept: () => {
        this.messagesWeightTest = [{
          severity: 'info', summary: 'Confirmed', detail: 'The input is correct.'}];
          this.weightConfirmed = true;
      },
      reject: () => {
        this.sessionService.newTest.testWeight = null;
        this.weightConfirmed = true;
      }
    });
  }

<div *ngIf="validateIfWeightOutsideRange()">
    <div>
      <p-confirmDialog key="confirmWeightTest"></p-confirmDialog>
      <button *ngIf="!weightConfirmed" type="button" (click)="confirmWeightTest()" pButton icon="pi pi-check"
              label="Please confirm!">
      </button>
      <p-messages [value]="messagesWeightTest"></p-messages>
    </div>
  </div>

来源：https://stackoverflow.com/questions/53831431/prime-ng-confirm-dialog-hide-the-button-after-confirmation

标签

javascript

angular

primeng