如何在Angular 8/10中实现DD/MM/YYYY格式的日期字段校验

核心实现思路 #

• 输入层：通过自定义属性指令实现输入时自动插入斜杠，同时限制输入长度，支持用户手动输入/修改斜杠
• 校验层：通过响应式表单自定义校验器实现所有合法性规则校验，值变化时自动触发校验

1. 自动补全斜杠的输入指令 #

创建date-format.directive.ts，实现输入过程中自动插入斜杠的逻辑，同时支持用户手动修改：

import { Directive, HostListener, ElementRef } from '@angular/core';

@Directive({
  selector: '[appDateFormat]'
})
export class DateFormatDirective {
  constructor(private el: ElementRef) {}

  @HostListener('input', ['$event'])
  onInput(event: any) {
    // 仅保留数字和斜杠，过滤非法字符
    let input = event.target.value.replace(/[^0-9/]/g, '');
    const parts = input.split('/').filter(part => part !== '');
    
    // 输入2位日期后自动补斜杠
    if (parts.length > 0 && parts[0].length >= 2) {
      parts[0] = parts[0].slice(0, 2);
      if (parts.length === 1) input = parts[0] + '/';
    }
    // 输入2位月份后自动补斜杠
    if (parts.length > 1 && parts[1].length >= 2) {
      parts[1] = parts[1].slice(0, 2);
      if (parts.length === 2) input = parts[0] + '/' + parts[1] + '/';
    }
    // 限制年份最多4位
    if (parts.length > 2) {
      parts[2] = parts[2].slice(0, 4);
      input = parts.slice(0,3).join('/');
    }

    event.target.value = input;
    // 同步更新表单绑定值
    if (this.el.nativeElement.value !== input) {
      this.el.nativeElement.value = input;
      this.el.nativeElement.dispatchEvent(new Event('input'));
    }
  }
}

将该指令添加到对应模块的declarations数组中即可全局使用。

2. DD/MM/YYYY自定义校验器 #

创建date.validator.ts，覆盖所有校验规则：

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

export const dateValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => {
  const value = control.value;
  if (!value) return null; // 非必填场景空值可放过，必填可搭配内置Validators.required使用

  // 校验格式+4位年份规则
  const dateRegex = /^\d{2}\/\d{2}\/\d{4}$/;
  if (!dateRegex.test(value)) {
    return { 
      invalidFormat: true, 
      invalidYear: value.split('/')?.[2]?.length !== 4 
    };
  }

  const [day, month, year] = value.split('/').map(Number);
  // 校验月份合法范围
  if (month < 1 || month > 12) {
    return { invalidMonth: true };
  }

  // 校验日期和月份匹配（自动适配闰年2月、大小月天数）
  const daysInMonth = new Date(year, month, 0).getDate();
  if (day < 1 || day > daysInMonth) {
    return { invalidDay: true };
  }

  return null;
};

3. 集成到表单组件 #

组件TS代码 #

将自定义校验器绑定到表单控件即可自动触发校验：

import { Component } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';
import { dateValidator } from './date.validator';

@Component({
  selector: 'app-datepicker-overview-example',
  templateUrl: './datepicker-overview-example.html'
})
export class DatepickerOverviewExample {
  dateControl = new FormControl('', [
    Validators.required, // 非必填可删除该行
    dateValidator
  ]);
}

模板HTML代码 #

在输入框绑定指令，同时添加对应错误提示：

<input 
  type="text" 
  [formControl]="dateControl" 
  appDateFormat 
  placeholder="DD/MM/YYYY"
  maxlength="10"
>

<!-- 错误提示 -->
<div *ngIf="dateControl.touched && dateControl.invalid">
  <span *ngIf="dateControl.hasError('required')">请输入日期</span>
  <span *ngIf="dateControl.hasError('invalidYear')">年份必须为4位数字</span>
  <span *ngIf="dateControl.hasError('invalidMonth')">月份范围为1-12</span>
  <span *ngIf="dateControl.hasError('invalidDay')">日期超出当月合法范围</span>
  <span *ngIf="dateControl.hasError('invalidFormat') && !dateControl.hasError('invalidYear')">请按DD/MM/YYYY格式输入</span>
</div>

如果你已经编写了部分校验逻辑，直接整合到dateValidator函数中即可。

内容的提问来源于stack exchange，提问作者Revanth Reddy