Angular 11反应式表单验证:开始日期早于结束日期

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

// 自定义验证器
const dateRangeValidator = (control: FormGroup): { [key: string]: boolean } | null => {
  const startDate = control.get('startDate').value;
  const endDate = control.get('endDate').value;

  if (startDate && endDate && startDate > endDate) {
    return { 'dateRangeInvalid': true };
  }

  return null;
};

// 创建表单
const form = new FormGroup({
  startDate: new FormControl('', Validators.required),
  endDate: new FormControl('', Validators.required)
}, { validators: dateRangeValidator });

// 在模板中使用表单
<form [formGroup]="form">
  <input type="date" formControlName="startDate">
  <input type="date" formControlName="endDate">
  <div *ngIf="form.hasError('dateRangeInvalid')">开始日期必须早于结束日期</div>
</form>