如何在angular reactive表单中验证日期字段？

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  form: FormGroup;

  ngOnInit() {
    this.form = new FormGroup({
      date: new FormControl('', [Validators.required, this.validateDate])
    });
  }

  validateDate(control: FormControl) {
    const inputDate = new Date(control.value);
    const currentDate = new Date();

    if (inputDate < currentDate) {
      return { pastDate: true };
    }

    return null;
  }
}

<form [formGroup]="form">
  <div>
    <label for="date">Date:</label>
    <input type="date" id="date" formControlName="date">
    <div *ngIf="form.get('date').invalid && (form.get('date').dirty || form.get('date').touched)">
      <div *ngIf="form.get('date').errors.required">Date is required.</div>
      <div *ngIf="form.get('date').errors.pastDate">Date must be in the future.</div>
    </div>
  </div>
</form>