Angular中如何校验输入值是否匹配MM/dd/YYYY日期格式？

Hey there! Looking at your Angular code, you're already using NgbDatepicker and DatePipe to handle dates, but you're missing validation to ensure the input sticks to the MM/dd/YYYY format. Let's walk through a couple of solid solutions that fit your existing setup:

Solution 1: Template-Driven Form Validation (Pattern + Custom Check) #

Since you're using template-driven forms with ngModel, we can combine a regex pattern check with a custom validation step in your onValChange function to cover both manual input and datepicker selections.

Step 1: Update the HTML Template #

Add a pattern attribute to enforce the format visually, plus bind to form state to show error messages:

<form #formName="ngForm">
  <input 
    class="form-control form-control-sm requiredV" 
    [(ngModel)]="dateValue" 
    placeholder="mm/dd/yyyy" 
    name="dateField" 
    id="dateField" 
    ngbDatepicker 
    #dateFieldngb="ngbDatepicker" 
    [required]="isRequired" 
    [ngClass]="{'isUntouched': formName.submitted, 'is-invalid': formName.dateField.invalid && (formName.dateField.dirty || formName.submitted)}"
    pattern="^(0[1-9]|1[012])/(0[1-9]|[12][0-9]|3[01])/(19|20)\d\d$"
    (ngModelChange)="onValChange($event)" 
    (keypress)="allow_only_numbers($event)" 
    (click)="dateFieldngb.toggle()"
    #dateField="ngModel"
  />

  <!-- Error Messages -->
  <div *ngIf="formName.dateField.invalid && (formName.dateField.dirty || formName.submitted)" class="invalid-feedback">
    <div *ngIf="formName.dateField.errors?.['required']">Date is required</div>
    <div *ngIf="formName.dateField.errors?.['pattern']">Please enter a date in MM/dd/YYYY format</div>
  </div>
</form>

The regex ^(0[1-9]|1[012])/(0[1-9]|[12][0-9]|3[01])/(19|20)\d\d$ ensures valid month/day ranges and restricts years to 1900-2099 (adjust the year range if needed).

Step 2: Enhance the onValChange Function #

Add validation to handle both manual string input and NgbDate objects from the picker, using Moment.js for strict date validity checks:

import { NgbDate } from '@ng-bootstrap/ng-bootstrap';
import * as moment from 'moment';

onValChange(event: NgbDate | string) {
  let formattedDate: string | null = null;
  let isValid = true;

  // Handle manual text input
  if (typeof event === 'string') {
    const dateRegex = /^(0[1-9]|1[012])\/(0[1-9]|[12][0-9]|3[01])\/(19|20)\d\d$/;
    // Use Moment's strict validation to catch invalid dates like 02/30
    isValid = dateRegex.test(event) && moment(event, 'MM/DD/YYYY', true).isValid();
    formattedDate = isValid ? event : '';
  } 
  // Handle datepicker selection (NgbDate object)
  else {
    const datePipe = new DatePipe('en-US');
    formattedDate = datePipe.transform(new Date(event.year, event.month - 1, event.day), 'MM/dd/yyyy');
    isValid = moment(formattedDate, 'MM/DD/YYYY', true).isValid();
  }

  if (isValid) {
    this.writeValue(moment(formattedDate, 'MM/DD/YYYY'));
  } else {
    // Reset invalid input and trigger validation feedback
    this.dateValue = '';
    const dateInput = document.getElementById('dateField') as HTMLInputElement;
    dateInput.setCustomValidity('Invalid date format');
    dateInput.reportValidity();
  }
}

Fix the allow_only_numbers Function #

Don't forget to allow slashes so users can type the date separator:

allow_only_numbers(event: KeyboardEvent) {
  const allowedChars = ['0','1','2','3','4','5','6','7','8','9','/'];
  if (!allowedChars.includes(event.key)) {
    event.preventDefault();
  }
}

Solution 2: Reusable Custom Validator (More Scalable) #

If you need to reuse this date format validation across multiple components, create a custom validator:

Step 1: Create the Validator Function #

import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';
import { NgbDate } from '@ng-bootstrap/ng-bootstrap';
import * as moment from 'moment';

export function dateFormatValidator(format: string = 'MM/DD/YYYY'): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    const value = control.value;
    if (!value) return null; // Leave empty checks to the required validator

    // Convert NgbDate to string format
    let dateStr: string;
    if (typeof value !== 'string') {
      const ngbDate = value as NgbDate;
      dateStr = `${ngbDate.month.toString().padStart(2, '0')}/${ngbDate.day.toString().padStart(2, '0')}/${ngbDate.year}`;
    } else {
      dateStr = value;
    }

    const isValid = moment(dateStr, format, true).isValid();
    return isValid ? null : { invalidDateFormat: true };
  };
}

Step 2: Register and Use the Validator #

Add the validator to your component's providers, then reference it in the template:

import { Component } from '@angular/core';
import { NG_VALIDATORS } from '@angular/forms';
import { dateFormatValidator } from './path-to-your-validator';

@Component({
  // ... component metadata
  providers: [
    { provide: NG_VALIDATORS, useValue: dateFormatValidator(), multi: true }
  ]
})
export class YourComponent {
  // ... component logic
}

Update the input to show the custom error:

<div *ngIf="dateField.errors?.['invalidDateFormat']" class="invalid-feedback">
  Please enter a date in MM/dd/YYYY format
</div>

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