在Angular中重置mat-date-range-input的实用教程

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ReactiveFormsModule } from '@angular/forms'; // 导入 ReactiveFormsModule

import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core'; // 或 MatMomentDateModule 如果使用Moment.js

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ReactiveFormsModule, // 引入响应式表单模块
    MatFormFieldModule,
    MatInputModule,
    MatDatepickerModule,
    MatNativeDateModule // 提供日期适配器
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

<!-- app.component.html -->
<mat-form-field appearance="fill">
  <mat-label>选择日期范围</mat-label>
  <mat-date-range-input [formGroup]="dateRangeForm" [rangePicker]="picker">
    <input matStartDate formControlName="start" placeholder="开始日期">
    <input matEndDate formControlName="end" placeholder="结束日期">
  </mat-date-range-input>
  <mat-hint>月/日/年 – 月/日/年</mat-hint>
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-date-range-picker #picker></mat-date-range-picker>

  <!-- 可选：添加错误提示 -->
  <mat-error *ngIf="dateRangeForm.controls.start.hasError('matStartDateInvalid')">无效的开始日期</mat-error>
  <mat-error *ngIf="dateRangeForm.controls.end.hasError('matEndDateInvalid')">无效的结束日期</mat-error>
</mat-form-field>

<button mat-raised-button color="warn" (click)="resetDateRange()">重置日期</button>

<p>当前选定范围: {{dateRangeForm.value | json}}</p>

// app.component.ts
import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // 定义一个FormGroup来管理日期范围
  dateRangeForm = new FormGroup({
    start: new FormControl<Date | null>(null), // 初始化为null，表示无选择
    end: new FormControl<Date | null>(null),   // 初始化为null
  });

  /**
   * 重置日期范围选择器的方法
   */
  resetDateRange() {
    this.dateRangeForm.patchValue({
      start: null, // 将开始日期设置为null
      end: null,   // 将结束日期设置为null
    });
    // 如果需要清除所有验证状态，可以使用 this.dateRangeForm.markAsUntouched() 和 this.dateRangeForm.markAsPristine()
  }
}