Angular Material输入框MM/DD/YYYY HH24MI格式日期时间验证问题

原生datetime-local输入控件的展示格式由浏览器本地区域设置决定，无法自定义为你需要的MM/DD/YYYY HH24MI格式，建议采用普通文本输入框配合Angular响应式表单校验实现，具体步骤如下：

• 第一步：自定义格式校验器
  基于正则实现格式校验规则，正则覆盖MM/DD/YYYY HH24MI的基础格式校验：
  • 月份范围01~12
  • 日期范围01~31
  • 小时范围00~23
  • 分钟范围00~59
    代码示例：

// 自定义校验器
import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';

export function customDatetimeValidator(): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    const inputVal = control.value;
    if (!inputVal) return null;
    const formatRegex = /^(0[1-9]|1[0-2])\/(0[1-9]|[12]\d|3[01])\/\d{4} ([01]\d|2[0-3])[0-5]\d$/;
    return formatRegex.test(inputVal) ? null : { invalidDatetimeFormat: true };
  };
}

在组件中初始化响应式表单，引入校验器：

import { FormControl, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  datetimeForm = new FormGroup({
    eventTime: new FormControl('', [
      Validators.required,
      customDatetimeValidator()
    ])
  });

  // 回显示例：直接赋值后端返回的格式字符串即可
  setInitValue(serverVal: string) {
    this.datetimeForm.patchValue({ eventTime: serverVal });
  }

  onSubmit() {
    if (this.datetimeForm.valid) {
      // 处理合法的输入值
      console.log(this.datetimeForm.value.eventTime);
    }
  }
}

• 第二步：编写Angular Material输入框模板，添加错误提示

<form [formGroup]="datetimeForm" (ngSubmit)="onSubmit()">
  <mat-form-field appearance="outline">
    <mat-label>活动时间</mat-label>
    <input 
      matInput 
      formControlName="eventTime" 
      placeholder="例如：10/02/2010 0730"
    >
    <mat-error *ngIf="datetimeForm.controls.eventTime.hasError('required')">
      该项为必填项
    </mat-error>
    <mat-error *ngIf="datetimeForm.controls.eventTime.hasError('invalidDatetimeFormat')">
      格式错误，请按 MM/DD/YYYY HHMM 格式输入
    </mat-error>
  </mat-form-field>
  <button mat-raised-button color="primary" type="submit" [disabled]="!datetimeForm.valid">提交</button>
</form>

• 第三步（可选优化）：添加输入掩码
  你可以增加输入掩码逻辑，限制用户仅能输入数字，且输入过程中自动补全/和空格，进一步降低输入错误概率：比如输入到第2位自动补/，第5位自动补/，第10位自动补空格。

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