Angular Material日期选择器：点击图标时避免触发focusout验证问题

你需要在日期选择器输入框的focusout事件中执行验证，但要排除点击toggle图标或打开日期面板的情况，以下是可行方案：

方案思路 #

核心是通过focusout事件的relatedTarget属性，判断焦点转移的目标是否是日期选择器的toggle按钮或面板元素，若是则跳过验证，否则执行验证逻辑。

实现步骤 #

1. 修改模板，添加模板引用变量 #

给mat-datepicker-toggle添加#toggle引用，同时给输入框添加#dateInput方便后续操作：

<mat-form-field>
  <mat-label> select dates </mat-label>
  <input 
    matInput 
    [matDatepicker]="seldatepicker" 
    [(ngModel)]="seldate" 
    (focusout)="validateDate($event)"
    #dateInput
  >
  <mat-hint>MM/DD/YYYY</mat-hint>
  <mat-datepicker-toggle #toggle matSuffix [for]="seldatepicker"></mat-datepicker-toggle>
  <mat-datepicker #seldatepicker></mat-datepicker>
</mat-form-field>

2. 组件中实现验证逻辑 #

通过ViewChild获取所需元素，在validateDate方法中判断焦点目标，决定是否执行验证：

import { Component, ViewChild, ElementRef } from '@angular/core';
import { MatDatepicker } from '@angular/material/datepicker';

@Component({
  // 组件元数据（如selector、templateUrl等）
})
export class YourComponent {
  seldate: Date | undefined;
  @ViewChild('toggle') toggleBtn!: ElementRef<HTMLElement>;
  @ViewChild('seldatepicker') datepicker!: MatDatepicker<Date>;
  @ViewChild('dateInput') dateInput!: ElementRef<HTMLInputElement>;

  validateDate(event: FocusEvent) {
    const relatedTarget = event.relatedTarget as HTMLElement;
    
    // 判断焦点是否转移到toggle按钮或日期面板内
    const isToggleOrPanel = 
      relatedTarget === this.toggleBtn.nativeElement ||
      (this.datepicker._overlayRef?.overlayElement.contains(relatedTarget) ?? false);

    if (isToggleOrPanel) {
      // 点击图标或面板，跳过验证
      return;
    }

    // 执行自定义验证逻辑
    if (!this.seldate || !this.isValidDate(this.seldate)) {
      // 验证不通过，将焦点放回输入框
      this.dateInput.nativeElement.focus();
      // 可添加错误提示逻辑，比如更新表单错误状态
      console.log('日期格式无效或未选择');
    }
  }

  // 示例：自定义日期有效性验证
  isValidDate(date: Date): boolean {
    // 根据需求实现，比如检查是否为有效日期、格式是否符合要求
    const isValid = !isNaN(date.getTime());
    // 若需要验证MM/DD/YYYY格式，可转成字符串后用正则判断
    const dateStr = new Intl.DateTimeFormat('en-US').format(date);
    return isValid && /^\d{2}\/\d{2}\/\d{4}$/.test(dateStr);
  }
}

关键说明 #

• relatedTarget：focusout事件的该属性指向焦点将要转移到的元素，以此判断用户操作对象。
• datepicker._overlayRef?.overlayElement：获取日期选择器的面板容器，判断焦点是否进入面板内，避免打开面板时触发验证。若你的Angular Material版本中_overlayRef不可用，可通过类名判断：

  const isPanelElement = relatedTarget?.classList.contains('mat-datepicker-content') ?? false;
  

替代方案：结合Angular表单验证 #

如果项目使用Reactive Forms或Template-Driven Forms，可配合内置日期验证器，核心逻辑仍为通过relatedTarget排除toggle和面板的情况，验证逻辑可整合到表单控件的blur事件中。

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