角度形式验证起始日期应大于截止日期

<form #dateForm="ngForm">
  <label for="startDate">起始日期:</label>
  <input type="date" id="startDate" name="startDate" [(ngModel)]="startDate" required>

  <label for="endDate">截止日期:</label>
  <input type="date" id="endDate" name="endDate" [(ngModel)]="endDate" required>

  <div *ngIf="dateForm.controls['startDate'].value >= dateForm.controls['endDate'].value">
    起始日期必须小于截止日期
  </div>

  <button type="submit" [disabled]="!dateForm.valid">提交</button>
</form>

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

@Component({
  selector: 'app-date-form',
  templateUrl: './date-form.component.html',
  styleUrls: ['./date-form.component.css']
})
export class DateFormComponent {
  dateForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.dateForm = this.fb.group({
      startDate: ['', Validators.required],
      endDate: ['', Validators.required]
    }, { validators: [this.dateRangeValidator] });
  }

  dateRangeValidator(formGroup: FormGroup) {
    const startDate = formGroup.get('startDate').value;
    const endDate = formGroup.get('endDate').value;

    if (startDate && endDate && startDate >= endDate) {
      formGroup.get('endDate').setErrors({ dateRange: true });
    } else {
      formGroup.get('endDate').setErrors(null);
    }
  }

  onSubmit() {
    if (this.dateForm.valid) {
      console.log('Form submitted:', this.dateForm.value);
    }
  }
}

<form [formGroup]="dateForm" (ngSubmit)="onSubmit()">
  <label for="startDate">起始日期:</label>
  <input type="date" id="startDate" formControlName="startDate">

  <label for="endDate">截止日期:</label>
  <input type="date" id="endDate" formControlName="endDate">

  <div *ngIf="dateForm.get('endDate').errors?.dateRange">
    起始日期必须小于截止日期
  </div>

  <button type="submit" [disabled]="!dateForm.valid">提交</button>
</form>