Angular5日期输入框手动输入验证问题求助

我之前处理过一模一样的场景，结合ng-bootstrap的特性和Angular表单验证，完全可以实现禁止输入非日期内容的需求，下面给你分步讲解可行的方案：

1. 自定义日期解析器（NgbDateParserFormatter） #

ng-bootstrap的日期输入组件依赖NgbDateParserFormatter处理字符串和NgbDateStruct的转换，我们可以重写这个类来实现严格的输入校验：

首先创建自定义解析器：

import { NgbDateParserFormatter, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
import { Injectable } from '@angular/core';

@Injectable()
export class CustomDateParserFormatter extends NgbDateParserFormatter {
  // 你可以改成'-'或者其他习惯的分隔符
  readonly DATE_DELIMITER = '/';

  parse(value: string): NgbDateStruct | null {
    if (!value) return null;

    const dateSegments = value.trim().split(this.DATE_DELIMITER);
    // 只接受DD/MM/YYYY格式的输入
    if (dateSegments.length !== 3) return null;

    const day = parseInt(dateSegments[0], 10);
    const month = parseInt(dateSegments[1], 10);
    const year = parseInt(dateSegments[2], 10);

    // 验证日期有效性（范围可根据业务调整）
    const isDayValid = !isNaN(day) && day >= 1 && day <= 31;
    const isMonthValid = !isNaN(month) && month >= 1 && month <= 12;
    const isYearValid = !isNaN(year) && year >= 1900 && year <= 2100;

    if (isDayValid && isMonthValid && isYearValid) {
      return { year, month, day };
    }
    // 不符合规则返回null，表单会自动标记为无效
    return null;
  }

  format(date: NgbDateStruct | null): string {
    // 格式化日期为用户友好的展示格式
    return date ? `${date.day}${this.DATE_DELIMITER}${date.month}${this.DATE_DELIMITER}${date.year}` : '';
  }
}

然后在你的模块中替换默认的解析器：

import { NgModule } from '@angular/core';
import { NgbDateParserFormatter } from '@ng-bootstrap/ng-bootstrap';
import { CustomDateParserFormatter } from './path-to-your-formatter';

@NgModule({
  providers: [
    { provide: NgbDateParserFormatter, useClass: CustomDateParserFormatter }
  ]
})
export class YourModule { }

2. 限制输入框的可输入字符 #

光有解析校验还不够，我们可以直接拦截用户输入，只允许数字和日期分隔符：

在模板的输入框中添加input事件监听：

<input 
  type="text" 
  class="form-control" 
  ngbDatepicker 
  #datePicker="ngbDatepicker"
  [(ngModel)]="selectedDate"
  (input)="filterInvalidChars($event)"
  required
/>
<button class="btn btn-outline-secondary" (click)="datePicker.toggle()">
  选择日期
</button>

然后在组件类中实现过滤方法：

filterInvalidChars(event: Event): void {
  const inputElement = event.target as HTMLInputElement;
  // 只保留数字和我们定义的分隔符，其他字符直接过滤掉
  inputElement.value = inputElement.value.replace(/[^0-9/]/g, '');
}

3. 添加表单验证提示 #

最后给用户明确的错误提示，让他们知道输入不符合要求：

如果是模板驱动表单，这样写提示：

<div 
  *ngIf="selectedDate && !datePicker.valid && (datePicker.dirty || datePicker.touched)" 
  class="text-danger mt-2"
>
  请输入有效的日期，格式为DD/MM/YYYY
</div>

如果是响应式表单，可以自定义验证器结合表单状态提示：

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

// 自定义日期验证器
export function validDateValidator(): ValidatorFn {
  return (control: AbstractControl): { [key: string]: boolean } | null => {
    const value = control.value;
    if (!value) return null;

    const dateSegments = value.split('/');
    if (dateSegments.length !== 3) return { invalidDate: true };

    const day = parseInt(dateSegments[0], 10);
    const month = parseInt(dateSegments[1], 10);
    const year = parseInt(dateSegments[2], 10);

    const isValid = !isNaN(day) && !isNaN(month) && !isNaN(year) &&
                    day >=1 && day <=31 && month >=1 && month <=12 && year >=1900 && year <=2100;
    
    return isValid ? null : { invalidDate: true };
  };
}

在表单构建时使用这个验证器：

this.dateForm = this.formBuilder.group({
  selectedDate: ['', [Validators.required, validDateValidator()]]
});

模板中的错误提示：

<div 
  *ngIf="dateForm.get('selectedDate')?.hasError('invalidDate') && (dateForm.get('selectedDate')?.dirty || dateForm.get('selectedDate')?.touched)"
  class="text-danger mt-2"
>
  请输入有效的日期，格式为DD/MM/YYYY
</div>

这样组合下来，用户既不能输入非数字/分隔符的内容，输入的日期格式或范围不对也会被及时拦截并提示，完美解决你遇到的问题！

内容的提问来源于stack exchange，提问作者Steffi Keran Rani J