Angular 5 + Angular Material日期选择器验证功能异常求助

你遇到的这两个验证问题，核心原因是模板变量命名冲突加上Angular Material 5时期表单控件状态同步的小细节问题，下面一步步给你解决：

1. 先修复核心问题：模板变量命名冲突 #

你的代码里把输入框的ngModel引用和日期选择器的引用都命名为#dob，这会导致Angular无法正确识别哪个是表单控件引用，直接搞乱errors对象的获取逻辑。首先修改日期选择器的模板变量名：

<mat-form-field class="full-width">
  <input matInput 
         [matDatepicker]="dobPicker"  <!-- 指向修改后的日期选择器变量 -->
         placeholder="Date of birth" 
         [(ngModel)]="myService.request.dob" 
         #dob="ngModel" 
         required 
         app-validateAdult>
  <mat-datepicker-toggle matSuffix [for]="dobPicker"></mat-datepicker-toggle>
  <mat-datepicker #dobPicker></mat-datepicker> <!-- 改为#dobPicker，避免冲突 -->
  <!-- 优化mat-error的判断逻辑 -->
  <mat-error *ngIf="dob.touched && dob.invalid">
    <span *ngIf="dob.errors?.required">Your date of birth is required</span>
    <span *ngIf="dob.errors?.validateAdult">You must be at least 18 years old (you are {{ dob.errors.validateAdult.currentAge }})</span>
  </mat-error>
</mat-form-field>

2. 修复必填验证的errors同步问题 #

Angular Material 5的日期输入框在未输入直接失焦时，有时候不会自动触发errors的更新，我们可以手动在blur事件里强制触发控件状态更新：

给输入框添加blur事件处理：

<input matInput 
       <!-- 其他属性保持不变 -->
       (blur)="dob.control.markAsTouched(); dob.control.updateValueAndValidity()">

这样当用户点击输入框又离开时，会强制标记控件为已触摸并重新验证，确保dob.errors.required能正确赋值。

3. 确保自定义成年验证器正常工作 #

除了模板的问题，还要验证你的自定义验证器是否正确注册：

• 在你的模块里，把AdultValidator添加到declarations数组中（因为它是一个指令）：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatDatepickerModule, MatInputModule, MatFormFieldModule } from '@angular/material';
import { FormsModule } from '@angular/forms';
import { AdultValidator } from './adult.validator'; // 替换成你的验证器实际路径

@NgModule({
  declarations: [
    // 你的组件
    AdultValidator
  ],
  imports: [
    CommonModule,
    FormsModule,
    MatFormFieldModule,
    MatInputModule,
    MatDatepickerModule
  ]
})
export class YourFeatureModule { }

• 另外，确保你已经安装并导入了moment，在验证器文件顶部添加：

import * as moment from 'moment';

额外调试小技巧 #

如果还是有问题，可以在模板里打印dob对象的状态，直观排查问题：

<pre>{{ dob | json }}</pre>

这样你能看到dob.touched、dob.invalid、dob.errors的具体值，快速定位哪里出了问题。

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