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

Question

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

这是我当前的代码

            <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>

目前我可以设置 datepicker 来选择从 1900 到前一天的日期

这是我的 TS

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

请找到Stackblitz网址

Answer 1

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

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

*ngIf并在模板中的 mat-form-field 中添加一个：

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