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

只需在组件或类的构造函数上方添加一个新的数据绑定属性，例如

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'，则它将显示日期选择器

选择单选按钮时如何隐藏日期选择器？

2 个答案: