本文旨在提供一种在 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. 实现验证逻辑
现在，我们可以使用这些映射来验证用户选择的日期。
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>注意事项：
- 确保日期格式一致。 在进行比较之前，始终将日期转换为统一的格式（例如 'en-GB'），避免由于日期格式不一致导致的验证错误。
- 性能优化。 如果日期数组非常大，可以考虑使用更高效的数据结构或算法来优化性能。
- 错误处理。 在实际应用中，需要添加适当的错误处理机制，以确保程序的健壮性。
总结：
通过构建日期映射并使用自定义验证器，我们可以有效地验证用户选择的日期是否与预定义的日期数组中的日期存在连续性。这种方法可以应用于各种需要进行日期验证的 Angular 应用中。 记住要始终保持日期格式一致，并根据实际情况进行性能优化和错误处理。
