選擇單選按鈕時如何隱藏日期選擇器？

Question

所以，我有日期選擇器和一個單選按鈕。 我想在選擇單選按鈕時隱藏日期選擇器。

所以這是日期選擇器：

     <div formGroupName="groupDateTwo">
            <mat-form-field class="search-field-input md-datepicker-input-container">
              <input
                matInput
                readonly
                required
                [matDatepicker]="picker2"
                placeholder="start datum"
                formControlName="startDate"
                (ngModelChange)="onChange($event)"
              />
              <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
              <mat-datepicker #picker2></mat-datepicker>
            </mat-form-field>
          </div>

這是選擇單選按鈕時：

if (optionLabel === 'Registratie') {   


    }

這是日期字段：

startDate: Date;

所以我的問題是，當在 ts 腳本中選擇單選按鈕時，你能隱藏日期選擇器嗎？

謝謝

Answer 1

只需在組件或 class 的構造函數上方添加一個新的數據綁定屬性

showDatePicker: boolean = true;

在您的單選按鈕選擇掛鈎中，將true分配給上述數據綁定屬性。

if (optionLabel === 'Registratie') {   
   this.showDatePicker = false;
}

最后在您的組件 html 中，使用*ngIf="expression"或[hidden]="expression"

<mat-form-field class="search-field-input md-datepicker-input-container" *ngIf="showDatePicker">
  ...
</mat-form-field>

Answer 2

<ng-template [ngIf]="optionLabel=='Registratie'">
 <mat-form-field class="search-field-input md-datepicker-input-container">
          <input
            matInput
            readonly
            required
            [matDatepicker]="picker2"
            placeholder="start datum"
            formControlName="startDate"
            (ngModelChange)="onChange($event)"
          />
      <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
    <mat-datepicker #picker2></mat-datepicker>
  </mat-form-field>
</ng-template>

這意味着如果 optionLabel=='Registratie' 那么它將顯示日期選擇器