Angular Material日期范围输入框未选结束日期时如何触发事件？

针对你使用Angular 15 + Angular Material 14时遇到的mat-date-range-input未选择结束日期不触发blur事件的问题，提供以下几种解决思路：

方法一：直接给结束日期输入框绑定blur事件 #

修改模板中的结束日期输入框，添加(blur)事件绑定：

<mat-form-field class="datepicker-widget" appearance="fill">
  <mat-date-range-input 
      [formGroup]="dateForm"
      [rangePicker]="datePicker"
      [min]="min"
      [max]="max">
      <input formControlName="start" matInput matStartDate placeholder="Start date">
      <input (blur)="onEndDateBlur()" (dateChange)="onDateChange($event)" formControlName="end" matInput matEndDate placeholder="End date">
  </mat-date-range-input>
  <mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>
  <mat-date-range-picker #datePicker disabled="false"></mat-date-range-picker>
</mat-form-field>

在组件类中实现onEndDateBlur方法，判断开始日期存在但结束日期为空时执行逻辑：

onEndDateBlur(): void {
  const startControl = this.dateForm.get('start');
  const endControl = this.dateForm.get('end');

  if (startControl?.value && !endControl?.value) {
    // 这里编写你需要触发的业务逻辑
    console.log("结束日期未选择，但输入框已失去焦点");
    // 示例：标记结束日期控件为已触碰状态，触发表单验证
    endControl?.markAsTouched();
  }
}

方法二：结合表单值变化与焦点状态监听 #

如果需要更灵活的场景处理，可以同时监听表单值变化和输入框焦点状态：

private endDateInputFocused = false;

ngOnInit(): void {
  const endInputElement = document.querySelector('input[formControlName="end"]') as HTMLInputElement;
  if (endInputElement) {
    endInputElement.addEventListener('focus', () => this.endDateInputFocused = true);
    endInputElement.addEventListener('blur', () => {
      this.endDateInputFocused = false;
      this.handleUnselectedEndDate();
    });
  }

  // 监听开始日期变化，若此时结束日期未选且输入框未聚焦，也触发逻辑
  this.dateForm.get('start')?.valueChanges.subscribe(() => {
    if (!this.endDateInputFocused && !this.dateForm.get('end')?.value) {
      this.handleUnselectedEndDate();
    }
  });
}

private handleUnselectedEndDate(): void {
  const startValue = this.dateForm.get('start')?.value;
  const endValue = this.dateForm.get('end')?.value;

  if (startValue && !endValue) {
    // 执行你的业务逻辑
    console.log("检测到未选择结束日期的状态");
  }
}

方法三：自定义指令封装逻辑（适合多组件复用） #

创建一个可复用的指令，封装日期范围选择的blur处理逻辑：

import { Directive, HostListener, Input, Output, EventEmitter } from '@angular/core';
import { FormGroup } from '@angular/forms';

@Directive({
  selector: '[appDateRangeBlur]'
})
export class DateRangeBlurDirective {
  @Input() appDateRangeBlur!: FormGroup;
  @Input() startControlName = 'start';
  @Input() endControlName = 'end';
  @Output() endDateMissing = new EventEmitter<void>();

  @HostListener('blur')
  onHostBlur(): void {
    const startControl = this.appDateRangeBlur.get(this.startControlName);
    const endControl = this.appDateRangeBlur.get(this.endControlName);

    if (startControl?.value && !endControl?.value) {
      endControl?.markAsTouched();
      this.endDateMissing.emit();
    }
  }
}

在模板中使用该指令，并监听自定义事件：

<mat-date-range-input 
    [formGroup]="dateForm"
    [rangePicker]="datePicker"
    [min]="min"
    [max]="max"
    appDateRangeBlur 
    [appDateRangeBlur]="dateForm"
    (endDateMissing)="onEndDateMissing()">
    ...
</mat-date-range-input>

组件类中实现对应的处理方法：

onEndDateMissing(): void {
  // 处理未选择结束日期的逻辑
}

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