Material Datepicker值为空校验问题：嵌入mat-radio-group时的异常

我之前也遇到过类似的坑——Material Datepicker在打开后如果用户没选日期就点击别处关闭，居然会自动把当前日期设为输入值，还触发dateChange事件，完全不符合预期。你提到用ngModel方案没成功，大概率是没区分清楚用户主动选择和组件自动赋值这两种场景，下面给你一套可行的解决方案：

核心思路 #

我们需要给日期选择器加两个关键标记：

1. 记录打开picker前的初始值，确保关闭后能还原到打开前的状态
2. 标记用户是否真的主动选择了日期，避免把组件自动赋值的当前日期当成有效输入
   当picker关闭时，如果用户没选日期，就把值恢复成初始状态。

具体实现代码 #

模板部分 #

<mat-radio-group [(ngModel)]="selectedOption">
  <mat-radio-button value="ffm" (change)="openDatepicker()">FFM</mat-radio-button>
  <mat-radio-button value="other">其他选项</mat-radio-button>
</mat-radio-group>

<mat-form-field>
  <input 
    matInput 
    [matDatepicker]="datePicker" 
    [(ngModel)]="selectedDate"
    (dateInput)="markUserSelection()"
  >
  <mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>
  <mat-datepicker #datePicker (closed)="handlePickerClose()"></mat-datepicker>
</mat-form-field>

组件逻辑部分 #

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

@Component({
  selector: 'app-datepicker-radio-demo',
  templateUrl: './datepicker-radio-demo.component.html'
})
export class DatepickerRadioDemoComponent {
  selectedOption: string | null = null;
  selectedDate: Date | null = null;
  @ViewChild('datePicker') datePicker!: MatDatepicker<Date>;
  
  private initialDate: Date | null = null;
  private isUserSelected = false;

  openDatepicker() {
    // 打开picker前，先记录当前的初始值
    this.initialDate = this.selectedDate;
    this.isUserSelected = false;
    this.datePicker.open();
  }

  markUserSelection() {
    // 用户主动选择/输入日期时，标记为有效选择
    this.isUserSelected = true;
  }

  handlePickerClose() {
    // 如果用户没选日期，就恢复初始值，覆盖组件自动赋值的当前日期
    if (!this.isUserSelected) {
      this.selectedDate = this.initialDate;
    }
  }
}

为什么这个方案能解决问题？ #

1. 初始值记录：打开picker时保存当前的selectedDate，确保关闭后能还原到打开前的状态
2. 用户选择标记：只有当用户通过dateInput事件（主动选日期或手动输入）触发时，才标记为有效选择
3. 关闭时校验：picker关闭时检查标记，如果用户没选日期，直接把值恢复成初始状态，彻底规避组件的自动赋值行为

额外优化（用FormControl替代ngModel） #

如果你用响应式表单，代码会更简洁，还能更好地控制表单状态：

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

@Component({
  selector: 'app-datepicker-radio-demo',
  template: `
    <mat-radio-group [(ngModel)]="selectedOption">
      <mat-radio-button value="ffm" (change)="openDatepicker()">FFM</mat-radio-button>
      <mat-radio-button value="other">其他选项</mat-radio-button>
    </mat-radio-group>

    <mat-form-field>
      <input 
        matInput 
        [matDatepicker]="datePicker" 
        [formControl]="dateControl"
        (dateInput)="markUserSelection()"
      >
      <mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>
      <mat-datepicker #datePicker (closed)="handlePickerClose()"></mat-datepicker>
    </mat-form-field>
  `
})
export class DatepickerRadioDemoComponent {
  selectedOption: string | null = null;
  dateControl = new FormControl<Date | null>(null);
  @ViewChild('datePicker') datePicker!: MatDatepicker<Date>;
  
  private initialValue: Date | null = null;
  private isUserSelected = false;

  openDatepicker() {
    this.initialValue = this.dateControl.value;
    this.isUserSelected = false;
    this.datePicker.open();
  }

  markUserSelection() {
    this.isUserSelected = true;
  }

  handlePickerClose() {
    if (!this.isUserSelected) {
      this.dateControl.setValue(this.initialValue);
    }
  }
}

这个方案应该能完美解决你遇到的问题，我之前用这个方法成功避开了Material Datepicker的这个默认坑。

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