javascript - Primeng确认对话框: Hide the Button after Confirmation

Question

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

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

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

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

2.) 选择"is"应关闭确认对话框并保留输入的值(这有效)。 确认按钮应消失(也失败)。

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

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

您可以简单地采用一个 bool 变量并将其设置为单击确认对话框按钮

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>