如何验证日期输入，以防止在Angular中使用反应式表单的过去日期？

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

@Component({
  selector: 'app-date-validation',
  template: `
    <form [formGroup]="dateForm">
      <input type="date" formControlName="selectedDate">
      <button (click)="submit()">Submit</button>
    </form>
  `,
})
export class DateValidationComponent {
  dateForm: FormGroup;

  constructor() {
    this.dateForm = new FormGroup({
      selectedDate: new FormControl('', Validators.required),
    });
  }

  submit() {
    if (this.dateForm.valid) {
      // 执行提交操作
      console.log(this.dateForm.value.selectedDate);
    }
  }
}

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

export function futureDateValidator(control: AbstractControl): ValidationErrors | null {
  const selectedDate = new Date(control.value);
  const currentDate = new Date();

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

  return null;
}

import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { futureDateValidator } from './future-date.validator';

@Component({
  selector: 'app-date-validation',
  template: `
    <form [formGroup]="dateForm">
      <input type="date" formControlName="selectedDate">
      <div *ngIf="dateForm.get('selectedDate').hasError('pastDate')">
        Please select a future date.
      </div>
      <button (click)="submit()">Submit</button>
    </form>
  `,
})
export class DateValidationComponent {
  dateForm: FormGroup;

  constructor() {
    this.dateForm = new FormGroup({
      selectedDate: new FormControl('', [Validators.required, futureDateValidator]),
    });
  }

  submit() {
    if (this.dateForm.valid) {
      // 执行提交操作
      console.log(this.dateForm.value.selectedDate);
    }
  }
}