Angular:根据对另一个日期输入的选择来验证日期输入

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

export function dateValidator(otherDateControl: AbstractControl): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } | null => {
    const selectedDate = new Date(control.value);
    const otherDate = new Date(otherDateControl.value);

    if (selectedDate <= otherDate) {
      return { dateInvalid: true };
    }
    
    return null;
  };
}

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { dateValidator } from './date-validator';

@Component({
  selector: 'app-root',
  template: `
    <form [formGroup]="myForm">
      <label>另一个日期：</label>
      <input type="date" formControlName="otherDate" />
      
      <br><br>
      
      <label>选择的日期：</label>
      <input type="date" formControlName="selectedDate" />
      
      <br><br>
      
      <div *ngIf="myForm.get('selectedDate').invalid && myForm.get('selectedDate').touched">
        <span style="color: red;">选择的日期必须晚于另一个日期</span>
      </div>
    </form>
  `
})
export class AppComponent {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      otherDate: ['', Validators.required],
      selectedDate: ['', [Validators.required, dateValidator(this.myForm.get('otherDate'))]]
    });
  }
}