Angular 中如何验证所选日期在日期数组中是否存在连续日期-html教程-PHP中文网

Angular 中如何验证所选日期在日期数组中是否存在连续日期

碧海醫心

发布： 2025-10-21 12:06:01

原创

946人浏览过

angular 中如何验证所选日期在日期数组中是否存在连续日期

本文旨在提供一种在 Angular 应用中使用响应式表单时，验证用户选择的日期是否与给定日期数组中的日期存在连续性的方法。我们将通过构建日期映射来高效地检查前后日期，从而实现自定义验证逻辑。

在 Angular 应用中，使用响应式表单进行日期验证时，有时需要确保用户选择的日期不会与预定义的日期数组中的日期形成连续性。例如，如果用户选择的日期是 2022年1月1日，而日期数组中包含 2021年12月31日和 2022年1月2日，则需要触发验证错误，因为这三个日期是连续的。以下是一种实现此验证逻辑的方法：

1. 构建日期映射

为了高效地进行连续性检查，我们可以创建两个映射：一个用于存储每个日期之前的日期，另一个用于存储每个日期之后的日期。

const previous: { [key: string]: string } = {};
const following: { [key: string]: string } = {};

登录后复制

2. 填充日期映射

假设我们有一个日期数组 datesArray，我们需要遍历这个数组，并为每个日期填充 previous 和 following 映射。为了简化操作，我们需要先将日期字符串转换成Date对象，并排序，然后再进行操作。

function populateDateMaps(datesArray: string[]): void {
  const dateObjects = datesArray.map(dateString => new Date(dateString));
  dateObjects.sort((a, b) => a.getTime() - b.getTime()); // 确保日期已排序

  for (let i = 0; i < dateObjects.length; i++) {
    const currentDate = dateObjects[i];
    const currentDateString = currentDate.toLocaleDateString('en-GB'); // 使用统一的日期格式

    if (i > 0) {
      const previousDate = new Date(currentDate.getTime() - (24 * 60 * 60 * 1000));
      previous[currentDateString] = previousDate.toLocaleDateString('en-GB');
    }

    if (i < dateObjects.length - 1) {
      const followingDate = new Date(currentDate.getTime() + (24 * 60 * 60 * 1000));
      following[currentDateString] = followingDate.toLocaleDateString('en-GB');
    }
  }
}

// 示例用法
const datesArray = ['31/12/2021', '01/11/2021', '02/01/2022'];
populateDateMaps(datesArray);

登录后复制

3. 实现验证逻辑

现在，我们可以使用这些映射来验证用户选择的日期。

DeepSeek

幻方量化公司旗下的开源大模型平台

10435

查看详情

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

export function consecutiveDateValidator(datesArray: string[]): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } | null => {
    const selectedDateString = new Date(control.value).toLocaleDateString('en-GB'); // 确保日期格式一致

    const previous: { [key: string]: string } = {};
    const following: { [key: string]: string } = {};
    const dateObjects = datesArray.map(dateString => new Date(dateString));
    dateObjects.sort((a, b) => a.getTime() - b.getTime());

    for (let i = 0; i < dateObjects.length; i++) {
      const currentDate = dateObjects[i];
      const currentDateString = currentDate.toLocaleDateString('en-GB');

      if (i > 0) {
        const previousDate = new Date(currentDate.getTime() - (24 * 60 * 60 * 1000));
        previous[currentDateString] = previousDate.toLocaleDateString('en-GB');
      }

      if (i < dateObjects.length - 1) {
        const followingDate = new Date(currentDate.getTime() + (24 * 60 * 60 * 1000));
        following[currentDateString] = followingDate.toLocaleDateString('en-GB');
      }
    }

    // 检查所选日期的前一天和后一天是否在日期数组中
    const selectedDate = new Date(control.value);
    const previousDateOfSelected = new Date(selectedDate.getTime() - (24 * 60 * 60 * 1000)).toLocaleDateString('en-GB');
    const followingDateOfSelected = new Date(selectedDate.getTime() + (24 * 60 * 60 * 1000)).toLocaleDateString('en-GB');

    let isConsecutive = false;

    for (const dateString of Object.keys(previous)) {
      if (previous[dateString] === previousDateOfSelected && datesArray.includes(dateString)) {
        isConsecutive = true;
        break;
      }
    }

    if (!isConsecutive) {
      for (const dateString of Object.keys(following)) {
        if (following[dateString] === followingDateOfSelected && datesArray.includes(dateString)) {
          isConsecutive = true;
          break;
        }
      }
    }

    return isConsecutive ? { 'consecutiveDate': true } : null;
  };
}

登录后复制

4. 在响应式表单中使用验证器

在你的 Angular 组件中，将此验证器添加到你的表单控件中。

import { FormGroup, FormControl, Validators } from '@angular/forms';
import { consecutiveDateValidator } from './consecutive-date.validator'; // 确保路径正确

export class MyComponent {
  myForm: FormGroup;
  datesArray = ['31/12/2021', '01/11/2021', '02/01/2022'];

  constructor() {
    this.myForm = new FormGroup({
      selectedDate: new FormControl('', [Validators.required, consecutiveDateValidator(this.datesArray)])
    });
  }

  onSubmit() {
    if (this.myForm.valid) {
      console.log('Form is valid');
    } else {
      console.log('Form is invalid');
    }
  }
}

登录后复制

5. 在模板中显示错误信息

在你的 HTML 模板中，显示验证错误信息。

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <input type="date" formControlName="selectedDate">
  <div *ngIf="myForm.get('selectedDate')?.hasError('required')">
    Date is required.
  </div>
  <div *ngIf="myForm.get('selectedDate')?.hasError('consecutiveDate')">
    Selected date has consecutive dates in the array.
  </div>
  <button type="submit">Submit</button>
</form>

登录后复制

注意事项：