Primeng 确认对话框：确认后隐藏按钮

Question

我在使用 Angular 和 PrimeNG 时遇到问题。

有一个重量输入字段，最多允许 150 个数字。如果输入的值大于 150，则输入字段下方会出现一个确认按钮。

如果单击此按钮，将弹出确认对话框，询问“您确定吗？”。它包含两个可供选择的按钮，“是”和“否”。

1.) 选择“否”应关闭确认对话框并删除先前在输入字段中输入的值（这有效）。 确认按钮将消失（失败）。

2.) 选择“是”应该关闭确认对话框并保留输入的值（这有效）。 确认按钮将消失（同样失败）。

是否有可能让按钮在确认对话框关闭后消失？

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

请注意：“validateIfWeightOutsideRange()”方法有效，因此我认为这里没有必要展示它。

这里是 PrimeNG 文档的链接：https://www.primefaces.org/primeng/#/confirmdialog

也许你有一个想法？

Answer 1

您可以简单地将一个布尔变量设置为点击确认对话框按钮

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>