Question

我正在尝试根据下拉菜单中选择的值隐藏/显示按钮。我当前的实现未按预期工作。

这是我的代码

<div class="ui-g-12 ui-md-12">
    <div class="ui-g-6 ui-sm-12">
      <div class="input-container">
        <label for="identityTypeId">Identity document type*</label>
        <p-dropdown [options]="identityDocTypeArr" formControlName="identityTypeId" id="identityTypeId" placeholder="Select"></p-dropdown>
      </div>
    </div>
    <div class="ui-g-6 ui-sm-12">
      <div class="input-container">
        <label for="identityValue">Identity number*</label>
        <input id="identityValue" type="text" formControlName="identityValue" size="50" placeholder="0000000000000" (blur)="validateSouthAfricanID()">
        <span *ngIf="offerFormGroup.controls.identityValue.status == 'VALID' && offerFormGroup.controls.identityValue.touched && idVal != false">
          <img class="valid-input-icon" src="../../../../../assets/icons/checkedGreen.png">
        </span>
      </div>
    </div>
  </div>


<div class="ui-g-12 ui-md-12 " *ngIf="iddoctype == 4">
  <div class="ui-g-12 ui-sm-12">
    <div class="ui-g-9"></div>
    <div class="ui-g-3 button-holder" style="text-align:right;">
      <button
        [disabled]="!offerFormGroup.valid || idVal == false"
        type="button"
        class="main create"
        (click)="createCandidate(false)">
        CREATE CANDIDATE
      </button>
    </div>
  </div>
</div>

<div class="ui-g-12 ui-md-12 " *ngIf="iddoctype != 4">
  <div class="ui-g-12 ui-sm-12">
    <div class="ui-g-9"></div>
    <div class="ui-g-3 button-holder" style="text-align:right;">
      <button
        [disabled]="!offerFormGroup.valid"
        type="button"
        class="main create"
        (click)="createCandidate(false)">
        CREATE CANDIDATE
      </button>
    </div>
  </div>
</div>

  validateInputs() {
      const iddoctype = this.offerFormGroup.get('identityTypeId').value;
      if (iddoctype == 4) {
        if (this.idVal == false) {
          this._errorService.openErrorPopup('Please enter valid identity number.');
          return false;
        } else {
        }
      }
      return true;
  }

因此，基本上，如果iddoctype = 4，则显示一个按钮并隐藏另一个按钮，反之亦然。请协助。

Answer 1

在您的html中，只需添加以下*ngIf条条件

<button *ngIf="this.offerFormGroup.get('identityTypeId').value === 4">
    Show when iddoctype is 4
</button>
<button *ngIf="this.offerFormGroup.get('identityTypeId').value !== 4">
    Show when iddoctype is not 4
</button>

Answer 2

可以在模板中添加offerFormGroup.get('identityTypeId').value，但是在每个更改检测周期内都会执行代码。在这里，这没什么大不了的，但是当您拥有更复杂的逻辑时，这可能是一个问题。

另一种方法是提高反应速度。

内部组件代码添加：

identityTypeId$ = this.offerFormGroup.get('identityTypeId').valueChanges
// or
showSomeButton$ = this.offerFormGroup.get('identityTypeId').valueChanges.pipe(map(value => value == 4))

然后在模板内部

<div *ngIf="(identityTypeId$ | async) == 4">

根据表单中的选择值隐藏/显示按钮

2 个答案: