如何顯示/隱藏<div>什么時候<mat-checkbox>被選中/未選中？

Question

我想在選中/取消選中<mat-checkbox>時顯示/隱藏<div> 。

我的復選框是以下代碼：

          <mat-checkbox formControlName="rushDelivery">
             Rush Delivery
          </mat-checkbox>

我想顯示/隱藏的<div>將在復選框下方，在頁面的更下方。

我過去使用過[(ngModel)]和*ngIf ，但是根據我的理解，最新版本的 Angular 不支持[(ngModel)]和*ngIf如果formControlName也用於同一元素中。

我無法刪除formControlName因為我在提交表單時使用它來獲取復選框的值。 我也不想觸及代碼的那部分，以防我破壞表單。

當復選框被選中/取消選中時，顯示/隱藏<div>的最簡單的替代解決方案是什么？

謝謝。

Answer 1

您可以使用 get 訪問 FormControl 的值，因此，如果您的 formGroup 被調用，例如 form，您只需要

    <div *ngIf="form.get('rushDelivery').value">
      ..If you can see this is because...
      ..the checkbox is checked..
    </div>

Answer 2

盡管[(ngModel)]不適用於formControlName ，但您仍然可以以多種方式顯示/隱藏div 。

選項 1：將*ngIf="form.rushDelivery"添加到要顯示/隱藏的div

選項 2：將(change)="checked = change.checked"回調添加到mat-checkbox並將*ngIf="checked"到div

Answer 3

有多種方法可以實現解決方案，顯示/隱藏 div！

.html

<mat-checkbox formControlName="rushDelivery" (click)='showOrHide()'>
   Rush Delivery
</mat-checkbox>
<div [class.hide]='isVisible'>
   Some info ...
</div>

.ts

isVisible = true;
showOrHide(){
   this.isVisible = !this.isVisible;
}

.css

.hide{
    display: none;
 }

Answer 4

在你的 HTML-

<mat-checkbox (click)='toggle()'>
   Rush Delivery
</mat-checkbox>
<div [hidden]='isHidden'>
   <p>This is a paragraph</p>
</div>

在您的 TS 中，最初將 isHidden 變量定義為 false-

 isHidden=false;

在您的功能中-

toggle(){
    this.isHidden=!this.isHidden;
  }