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

本文介绍了在 Angular 中使用响应式表单验证所选日期，确保其在给定日期数组中不存在连续日期的方法。核心思路是构建两个映射，分别存储每个日期的前一个和后一个日期，并通过比较映射关系来检测连续性，从而实现自定义的日期连续性验证。

在 Angular 应用中，经常需要对用户输入的数据进行验证，以确保数据的准确性和完整性。其中，日期验证是一个常见的需求。本文将介绍如何使用 Angular 的响应式表单技术，验证用户选择的日期是否与给定日期数组中的日期存在连续性。

核心思路

核心思路是构建两个映射（Map 或 Object），分别存储日期数组中每个日期的前一个日期和后一个日期。然后，当用户选择一个日期时，检查该日期的前一个日期是否在“后一个日期映射”中，以及该日期的后一个日期是否在“前一个日期映射”中。如果都存在，则说明存在连续日期，验证失败。

实现步骤

1. 准备日期数组：

   首先，你需要有一个包含日期字符串的数组。这些日期字符串的格式需要统一，例如 YYYY-MM-DD 或 DD/MM/YYYY。

   const datesArray: string[] = ['2023-12-31', '2024-01-02', '2024-01-05'];

2. 创建日期映射：

   创建两个对象，分别存储每个日期的前一个日期和后一个日期。为了方便比较，可以将日期字符串转换为 Date 对象进行计算，然后再转换回字符串。

   const previousDates: { [key: string]: string } = {};
   const followingDates: { [key: string]: string } = {};
   
   datesArray.forEach(dateString => {
     const date = new Date(dateString);
     const previousDate = new Date(date);
     previousDate.setDate(date.getDate() - 1);
     const followingDate = new Date(date);
     followingDate.setDate(date.getDate() + 1);
   
     previousDates[dateString] = previousDate.toLocaleDateString('en-CA'); // 使用 YYYY-MM-DD 格式
     followingDates[dateString] = followingDate.toLocaleDateString('en-CA'); // 使用 YYYY-MM-DD 格式
   });
   
   console.log("Previous Dates:", previousDates);
   console.log("Following Dates:", followingDates);

   注意： toLocaleDateString('en-CA') 确保日期格式为 YYYY-MM-DD，以便后续比较。如果你的日期格式不同，需要相应地调整。

   

   Bolt.new

   Bolt.new是一个免费的AI全栈开发工具

   下载

3. 创建自定义验证器：

   创建一个自定义验证器函数，该函数接收 AbstractControl 作为参数，并返回一个包含验证错误的对象，或者返回 null 如果验证通过。

   import { AbstractControl, ValidatorFn } from '@angular/forms';
   
   export function consecutiveDatesValidator(previousDates: { [key: string]: string }, followingDates: { [key: string]: string }): ValidatorFn {
     return (control: AbstractControl): { [key: string]: any } | null => {
       const selectedDateString = control.value;
       if (!selectedDateString) {
         return null; // 如果没有选择日期，则不进行验证
       }
   
       const selectedDate = new Date(selectedDateString);
       const previousSelectedDate = new Date(selectedDate);
       previousSelectedDate.setDate(selectedDate.getDate() - 1);
       const followingSelectedDate = new Date(selectedDate);
       followingSelectedDate.setDate(selectedDate.getDate() + 1);
   
       const previousSelectedDateString = previousSelectedDate.toLocaleDateString('en-CA');
       const followingSelectedDateString = followingSelectedDate.toLocaleDateString('en-CA');
   
       for (const dateString in previousDates) {
         if (previousDates[dateString] === selectedDateString) {
           for (const dateString2 in followingDates) {
             if (followingDates[dateString2] === selectedDateString) {
                 return { consecutiveDates: true };
             }
           }
         }
       }
   
       return null; // 验证通过
     };
   }

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

   在你的 Angular 组件中，创建响应式表单，并将自定义验证器添加到日期控件中。

   import { Component, OnInit } from '@angular/core';
   import { FormBuilder, FormGroup, Validators } from '@angular/forms';
   import { consecutiveDatesValidator } from './consecutive-dates.validator'; // 导入自定义验证器
   
   @Component({
     selector: 'app-my-component',
     templateUrl: './my-component.component.html',
     styleUrls: ['./my-component.component.css']
   })
   export class MyComponentComponent implements OnInit {
     myForm: FormGroup;
     datesArray: string[] = ['2023-12-31', '2024-01-02', '2024-01-05'];
     previousDates: { [key: string]: string } = {};
     followingDates: { [key: string]: string } = {};
   
     constructor(private fb: FormBuilder) { }
   
     ngOnInit() {
         this.datesArray.forEach(dateString => {
           const date = new Date(dateString);
           const previousDate = new Date(date);
           previousDate.setDate(date.getDate() - 1);
           const followingDate = new Date(date);
           followingDate.setDate(date.getDate() + 1);
   
           this.previousDates[dateString] = previousDate.toLocaleDateString('en-CA'); // 使用 YYYY-MM-DD 格式
           this.followingDates[dateString] = followingDate.toLocaleDateString('en-CA'); // 使用 YYYY-MM-DD 格式
         });
   
       this.myForm = this.fb.group({
         selectedDate: ['', [Validators.required, consecutiveDatesValidator(this.previousDates, this.followingDates)]]
       });
     }
   
     onSubmit() {
       if (this.myForm.valid) {
         console.log('Form submitted:', this.myForm.value);
       } else {
         console.log('Form is invalid');
       }
     }
   }

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

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

   <form [formGroup]="myForm" (ngSubmit)="onSubmit()">
     <label for="selectedDate">Select Date:</label>
     <input type="date" id="selectedDate" formControlName="selectedDate">
     <div *ngIf="myForm.get('selectedDate')?.hasError('required') && myForm.get('selectedDate')?.touched">
       Please select a date.
     </div>
     <div *ngIf="myForm.get('selectedDate')?.hasError('consecutiveDates') && myForm.get('selectedDate')?.touched">
       The selected date has consecutive dates.
     </div>
     <button type="submit">Submit</button>
   </form>

注意事项

• 日期格式： 确保所有日期字符串的格式一致，并与 toLocaleDateString 方法的参数匹配。
• 时区： Date 对象在处理时区时可能会出现问题。如果你的应用需要处理不同时区的日期，请使用专门的日期处理库，例如 Moment.js 或 date-fns。
• 性能： 如果日期数组非常大，构建日期映射可能会影响性能。可以考虑使用更高效的数据结构或算法来优化性能。

总结

通过使用 Angular 的响应式表单和自定义验证器，可以方便地实现日期连续性验证。这种方法可以有效地防止用户选择与给定日期数组中的日期存在连续性的日期，从而提高数据的准确性和完整性。记住，要根据你的具体需求调整代码，例如日期格式和错误信息的显示。