如果小于 18 年，如何为垫子日期选择器设置条件需要显示文本框角度

问题描述

如果年龄小于 18 岁，我正在尝试根据年龄验证显示文本字段，则只有 mat 输入字段（应出现测试框）

这是我当前的代码

            <form [formGroup]="form">
          <mat-form-field>
            <input matInput [matDatepicker]="picker" placeholder="Choose a date"
            formControlName="pickerCtl">
            <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
            <mat-datepicker #picker></mat-datepicker>
          </mat-form-field>
        <mat-form-field>
          <mat-label>Guardian Name</mat-label>
          <input matInput formControlName="guardianName" class="form-control" placeholder="Guardian Name">
            <span class="fa fa-lock lock_field"></span>
          </mat-form-field>
          <mat-form-field>
              <mat-label>Guardian Contact No</mat-label>
              <input matInput formControlName="guardianContactNo" class="form-control" placeholder="Guardian Contact No">
              <span class="fa fa-lock lock_field"></span>
          </mat-form-field>

目前我能够设置日期选择器来选择从 1900 年到前一天的日期

这是我的 TS

    minDate = new Date(1900,1);
    maxDate =  new Date(new Date().setDate(new Date().getDate()-1))

请找到 Stackblitz 网址

解决方法

您可以使用 *ngIf 来显示/隐藏表单域。在您的组件中创建一个方法来确定监护人是否应该可见。像这样：

  get showGuardian(): boolean {
    const date = new Date().setFullYear(this.maxDate.getFullYear() - 18);
    return this.form.get('pickerCtl').value?.getTime() > date;
  }

并向模板中的 mat-form-field 添加 *ngIf：

  <mat-form-field *ngIf="showGuardian">
    ..
  </mat-form-field>