Prime-NG 确认对话框:确认后隐藏按钮 [英] Prime-NG Confirm Dialog: Hide the Button after Confirmation

问题描述

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

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

如果单击此按钮，则会弹出确认对话框，询问您确定吗?".它包含两个按钮可供选择，是"和否".

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

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

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

test.component.html:

重量:<div class="ui-inputgroup"><input pInputText type="number" id="weight" name="weight" [(ngModel)]="newTest.testWeight"占位符="---"><span class="ui-inputgroup-addon">kg</span>
<div *ngIf="validateIfWeightOutsideRange()"><div><p-confirmDialog key="confirmWeightTest"></p-confirmDialog><button type="button" (click)="confirmWeightTest()" pButton icon="pi pi-check"label="请确认！"><p-messages [value]="messagesWeightTest"></p-messages>

test.component.ts

messagesWeightTest: Message[] = [];确认重量测试(){this.confirmationService.confirm({消息:'你确定吗?',标题:'确认'，图标:'pi pi-感叹号-三角形'，key: 'confirmWeightTest',接受:() =>{this.messagesWeightTest = [{严重性:'信息'，摘要:'已确认'，详细信息:'输入正确.'}];},拒绝:() =>{this.sessionService.newTest.testWeight = null;}});}

请注意:validateIfWeightOutsideRange()"方法有效，因此我认为没有必要在这里展示.

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

也许你有什么想法?

解决方案

你可以简单地取一个 bool 变量并将其设置在 confirmDialog 按钮上点击

messagesWeightTest: Message[] = [];公共权重确认:布尔值 = 假；确认重量测试(){this.confirmationService.confirm({消息:'你确定吗?',标题:'确认'，图标:'pi pi-感叹号-三角形'，key: 'confirmWeightTest',接受:() =>{this.messagesWeightTest = [{严重性:'信息'，摘要:'已确认'，详细信息:'输入正确.'}];this.weightConfirmed = true;},拒绝:() =>{this.sessionService.newTest.testWeight = null;this.weightConfirmed = true;}});}

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

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?

解决方案

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>

这篇关于Prime-NG 确认对话框:确认后隐藏按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！