Angular响应式表单：验证所选日期是否在日期数组中形成连续序列

// date-utils.ts
import { AbstractControl, ValidatorFn, ValidationErrors } from '@angular/forms';

/**
 * 将 DD/MM/YYYY 格式的字符串转换为 Date 对象
 * @param dateString 日期字符串
 * @returns Date 对象
 */
function parseDateString(dateString: string): Date | null {
  const parts = dateString.split('/');
  if (parts.length === 3) {
    const day = parseInt(parts[0], 10);
    const month = parseInt(parts[1], 10) - 1; // 月份从0开始
    const year = parseInt(parts[2], 10);
    // 检查日期是否有效，避免无效日期创建
    const date = new Date(year, month, day);
    if (date.getFullYear() === year && date.getMonth() === month && date.getDate() === day) {
      return date;
    }
  }
  return null;
}

/**
 * 将 Date 对象格式化为 DD/MM/YYYY 字符串
 * @param date Date 对象
 * @returns DD/MM/YYYY 格式的字符串
 */
function formatDateToDDMMYYYY(date: Date): string {
  const day = date.getDate().toString().padStart(2, '0');
  const month = (date.getMonth() + 1).toString().padStart(2, '0');
  const year = date.getFullYear();
  return `${day}/${month}/${year}`;
}

/**
 * 获取给定日期的前一天或后一天
 * @param date 参照日期
 * @param daysToAddOrSubtract 要加减的天数 (正数表示加，负数表示减)
 * @returns 计算后的 Date 对象
 */
function getRelativeDate(date: Date, daysToAddOrSubtract: number): Date {
  const newDate = new Date(date);
  newDate.setDate(date.getDate() + daysToAddOrSubtract);
  return newDate;
}

export { parseDateString, formatDateToDDMMYYYY, getRelativeDate };

// custom-validators.ts
import { AbstractControl, ValidatorFn, ValidationErrors } from '@angular/forms';
import { parseDateString, formatDateToDDMMYYYY, getRelativeDate } from './date-utils'; // 假设 date-utils.ts 在同级目录

/**
 * 验证所选日期是否与给定日期数组中的日期形成连续序列。
 * 如果所选日期的前一天和后一天都存在于 datesArray 中，则验证失败。
 * @param datesArray 包含现有日期的字符串数组 (DD/MM/YYYY 格式)
 * @returns ValidatorFn
 */
export function consecutiveDateValidator(datesArray: string[]): ValidatorFn {
  // 为了提高查找效率，将 datesArray 转换为 Set
  const existingDatesSet = new Set<string>(datesArray);

  return (control: AbstractControl): ValidationErrors | null => {
    const selectedDateString: string = control.value;

    if (!selectedDateString) {
      return null; // 如果没有选择日期，则不进行验证
    }

    const selectedDate = parseDateString(selectedDateString);

    if (!selectedDate) {
      return { invalidDateFormat: true }; // 日期格式不正确
    }

    // 计算前一天和后一天
    const previousDay = getRelativeDate(selectedDate, -1);
    const nextDay = getRelativeDate(selectedDate, 1);

    // 将计算出的日期格式化为字符串，以便与 existingDatesSet 进行比较
    const previousDayFormatted = formatDateToDDMMYYYY(previousDay);
    const nextDayFormatted = formatDateToDDMMYYYY(nextDay);

    // 检查前一天和后一天是否都存在于 existingDatesSet 中
    const hasPreviousDay = existingDatesSet.has(previousDayFormatted);
    const hasNextDay = existingDatesSet.has(nextDayFormatted);

    if (hasPreviousDay && hasNextDay) {
      // 如果前一天和后一天都在数组中，则触发验证错误
      return { consecutiveDates: true };
    }

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

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

@Component({
  selector: 'app-root',
  template: `
    <form [formGroup]="dateForm" (ngSubmit)="onSubmit()">
      <div>
        <label for="selectedDate">选择日期 (DD/MM/YYYY):</label>
        <input id="selectedDate" type="text" formControlName="selectedDate" placeholder="e.g., 01/01/2022">
        <div *ngIf="dateForm.get('selectedDate')?.invalid && dateForm.get('selectedDate')?.touched">
          <div *ngIf="dateForm.get('selectedDate')?.errors?.['required']" class="error-message">
            日期是必填项。
          </div>
          <div *ngIf="dateForm.get('selectedDate')?.errors?.['invalidDateFormat']" class="error-message">
            日期格式不正确，请使用 DD/MM/YYYY。
          </div>
          <div *ngIf="dateForm.get('selectedDate')?.errors?.['consecutiveDates']" class="error-message">
            您选择的日期前后都有已存在的日期，请选择其他日期。
          </div>
        </div>
      </div>
      <button type="submit" [disabled]="dateForm.invalid">提交</button>
    </form>
    <p>表单状态: {{ dateForm.status }}</p>
    <p>表单值: {{ dateForm.value | json }}</p>
    <p>现有日期数组: {{ existingDates | json }}</p>
  `,
  styles: [`
    .error-message { color: red; font-size: 0.8em; }
    input.ng-invalid.ng-touched { border-color: red; }
  `]
})
export class AppComponent implements OnInit {
  dateForm!: FormGroup;
  // 模拟已存在的日期数组
  existingDates: string[] = ['31/12/2021', '01/11/2021', '02/01/2022', '05/01/2022'];

  constructor(private fb: FormBuilder) {}

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

  onSubmit(): void {
    if (this.dateForm.valid) {
      console.log('表单已提交:', this.dateForm.value);
      alert('表单验证通过，已提交！');
    } else {
      console.log('表单验证失败:', this.dateForm.errors);
      alert('表单验证失败，请检查输入！');
    }
  }
}

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms'; // 导入 ReactiveFormsModule

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule // 添加到 imports 数组
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }