Angular Material日期选择器API传参日期格式错误排查

Angular Material日期范围选择器默认会将选中的日期以Date对象的形式存入FormControl，而非格式化后的字符串。你初始化时用toISOString().substring(0,10)得到的字符串，会在用户选择日期后被替换为Date对象，导致传给API的参数是带时分秒、时区的完整ISO字符串。另外你的模板中同时使用了ngModel和formGroup，属于冗余绑定，可能引发意外行为，需要移除ngModel。

方法一：提交时手动格式化日期（最直接） #

在调用API前，将FormControl中的Date对象转换为YYYY-MM-DD格式的字符串：

修改component.ts #

import { DatePipe } from '@angular/common';
// ... 其他导入代码

setDate: string = new Date().toISOString().split('T')[0];
range: FormGroup; 

constructor(private datePipe: DatePipe) {
  this.range = new FormGroup({
    start: new FormControl(this.setDate),
    end: new FormControl(this.setDate),
  })
}

getSingleCustomerRangeChartData(event: any) {
  const id = Number(this.route.snapshot.paramMap.get('id'));
  
  // 格式化选中的日期
  const formattedRange = {
    start: this.formatDate(this.range.get('start')?.value),
    end: this.formatDate(this.range.get('end')?.value)
  };

  this.customerService.getSingleCustomerRangeChartData(id, formattedRange).subscribe(
    data => {
      this.prodajaChart = data;
      console.log('格式化后的日期: ', formattedRange);
    },
    error => {
      console.log('Error', error);
    });
}

// 日期格式化工具函数
private formatDate(date: Date | string): string {
  if (typeof date === 'string') return date;
  return new Date(date).toISOString().split('T')[0];
}

修改component.html（移除冗余的ngModel） #

<mat-form-field appearance="fill">
  <mat-label>Enter date:</mat-label>
  <mat-date-range-input [formGroup]="range" [rangePicker]="picker">
    <input matStartDate formControlName="start" placeholder="Start date" >
    <input matEndDate formControlName="end" placeholder="End date">
  </mat-date-range-input>
  <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-date-range-picker #picker>
    <mat-date-range-picker-actions>
      <button mat-button matDateRangePickerCancel>Cancel</button>
      <button mat-raised-button color="primary" matDateRangePickerApply (click)="getSingleCustomerRangeChartData($event)">Apply</button>
    </mat-date-range-picker-actions>
  </mat-date-range-picker>
</mat-form-field>

方法二：在服务层处理格式化（可选） #

如果不想修改组件代码，也可以在服务中对传入的日期参数进行格式化：

修改service.ts #

getSingleCustomerRangeChartData(id:number, range: any) {
  let queryParams = new HttpParams();

  Object.keys(range).forEach((key) => {
    if (range[key] !== null) {
      // 格式化日期参数
      const formattedDate = typeof range[key] === 'object' 
        ? new Date(range[key]).toISOString().split('T')[0] 
        : range[key];
      queryParams = queryParams.append(key, formattedDate);
    }
  });
  console.log(queryParams);
  return this.httpClient.get<typeof prodajaChart>(`${environment.apiUrl}stat/sale/${id}`,{params:queryParams})
}

修改后，提交时查看formattedRange或服务中的queryParams，确认日期格式为YYYY-MM-DD，此时API请求的参数就会符合预期。

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