Angular Reactive Forms中验证日期数组是否存在连续性

// date-utils.ts
export function parseDateString(dateString: string): Date | null {
  if (!dateString) {
    return null;
  }
  const parts = dateString.split('/');
  if (parts.length !== 3) {
    return null; // Invalid format
  }
  const day = parseInt(parts[0], 10);
  const month = parseInt(parts[1], 10) - 1; // Month is 0-indexed
  const year = parseInt(parts[2], 10);

  const date = new Date(year, month, day);
  // Check if the parsed date is valid and matches the input (e.g., '31/02/2022' would be invalid)
  if (date.getFullYear() !== year || date.getMonth() !== month || date.getDate() !== day) {
    return null;
  }
  // Clear time part for consistent comparison
  date.setHours(0, 0, 0, 0);
  return date;
}

export function getDayTimestamp(date: Date): number {
  // Returns timestamp for the start of the day (00:00:00.000)
  const d = new Date(date);
  d.setHours(0, 0, 0, 0);
  return d.getTime();
}

// custom-validators.ts
import { AbstractControl, ValidatorFn, ValidationErrors } from '@angular/forms';
import { parseDateString, getDayTimestamp } from './date-utils'; // 引入日期工具函数

export function consecutiveDateValidator(existingDates: string[]): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    // 1. 检查输入值是否存在
    if (!control.value) {
      return null; // 空值不进行验证
    }

    const selectedDateString: string = control.value;
    const selectedDate = parseDateString(selectedDateString);

    // 2. 验证所选日期的格式
    if (!selectedDate) {
      // 如果日期格式无效，可以返回一个特定的错误，或者让其他验证器（如required）处理
      return { invalidDateFormat: true };
    }

    // 3. 将现有日期数组转换为时间戳的Set，以便高效查找
    const existingDateTimestamps = new Set<number>();
    existingDates.forEach(dateStr => {
      const date = parseDateString(dateStr);
      if (date) {
        existingDateTimestamps.add(getDayTimestamp(date));
      }
    });

    // 4. 计算所选日期的前一天和后一天的时间戳
    const oneDayInMs = 24 * 60 * 60 * 1000; // 一天的毫秒数

    const selectedDayTimestamp = getDayTimestamp(selectedDate);
    const previousDayTimestamp = selectedDayTimestamp - oneDayInMs;
    const nextDayTimestamp = selectedDayTimestamp + oneDayInMs;

    // 5. 检查是否存在连续日期
    if (existingDateTimestamps.has(previousDayTimestamp) || existingDateTimestamps.has(nextDayTimestamp)) {
      return { consecutiveDate: true }; // 存在连续日期，返回验证错误
    }

    // 6. 验证通过
    return null;
  };
}

// your-component.ts
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { consecutiveDateValidator } from './custom-validators'; // 引入自定义验证器

@Component({
  selector: 'app-date-form',
  template: `
    <form [formGroup]="dateForm">
      <label for="selectedDate">选择日期 (DD/MM/YYYY):</label>
      <input id="selectedDate" type="text" formControlName="selectedDate" placeholder="DD/MM/YYYY">
      <div *ngIf="dateForm.get('selectedDate')?.invalid && dateForm.get('selectedDate')?.touched">
        <div *ngIf="dateForm.get('selectedDate')?.errors?.['required']">
          日期是必填项。
        </div>
        <div *ngIf="dateForm.get('selectedDate')?.errors?.['invalidDateFormat']">
          日期格式不正确，请使用 DD/MM/YYYY。
        </div>
        <div *ngIf="dateForm.get('selectedDate')?.errors?.['consecutiveDate']">
          所选日期与现有日期存在连续性，请重新选择。
        </div>
      </div>
      <p>现有日期: {{ existingDates.join(', ') }}</p>
      <p>表单状态: {{ dateForm.status }}</p>
    </form>
  `
})
export class DateFormComponent implements OnInit {
  dateForm!: FormGroup;
  existingDates: string[] = ['31/12/2021', '02/01/2022', '05/01/2022']; // 示例现有日期

  ngOnInit(): void {
    this.dateForm = new FormGroup({
      selectedDate: new FormControl('', [
        Validators.required,
        consecutiveDateValidator(this.existingDates) // 应用自定义验证器
      ])
    });
  }
}