Angular material datepicker:如何为无效和必需的输入获取两个不同的验证错误

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="选择日期" [formControl]="dateControl" required>
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

import { FormControl, ValidationErrors } from '@angular/forms';

function customDateValidator(control: FormControl): ValidationErrors | null {
  const value = control.value;

  // 检查是否为有效日期
  if (!(value instanceof Date) || isNaN(value.getTime())) {
    return { invalidDate: true };
  }

  // 检查是否为必需输入
  if (!value) {
    return { required: true };
  }

  return null; // 验证通过
}

import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-date-picker-form',
  templateUrl: './date-picker-form.component.html',
  styleUrls: ['./date-picker-form.component.css']
})
export class DatePickerFormComponent {
  dateControl: FormControl;

  constructor(private fb: FormBuilder) {
    this.dateControl = this.fb.control('', [Validators.required, customDateValidator]);
  }
}