如何在提交表单时格式化Angular Material DatePicker的输出值

可以直接在表单层面实现该需求，无需提交后单独处理，以下是两种常用可行方案：

方案1：配置日期适配器 + 实时值转换（推荐） #

该方案同时实现输入框显示格式、解析格式与表单值输出格式统一为 DD-MM-YYYY

• 第一步：安装依赖（如果未安装）
  如果你用moment处理日期，先安装对应适配器：

  npm install moment @angular/material-moment-adapter
  

• 第二步：在组件中配置日期格式与适配器
  在对应组件的ts文件头部导入依赖，自定义日期格式：

  import { MAT_DATE_FORMATS, DateAdapter, MAT_DATE_LOCALE } from '@angular/material/core';
  import { MomentDateAdapter } from '@angular/material-moment-adapter';
  import * as moment from 'moment';
  
  // 自定义DD-MM-YYYY格式配置
  export const CUSTOM_DATE_FORMATS = {
    parse: {
      dateInput: 'DD-MM-YYYY',
    },
    display: {
      dateInput: 'DD-MM-YYYY',
      monthYearLabel: 'MMM YYYY',
      dateA11yLabel: 'LL',
      monthYearA11yLabel: 'MMMM YYYY',
    },
  };
  

  然后在@Component装饰器中添加 providers 配置：

  @Component({
    // 原有组件配置不变
    providers: [
      { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
      { provide: MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMATS },
    ]
  })
  

• 第三步：监听日期控件值变化，自动转成格式化字符串
  在表单初始化完成后添加订阅，注意加emitEvent: false避免死循环：

  // 替换为你自己的表单实例
  this.yourForm.get('dateOfBirth').valueChanges.subscribe(date => {
    if (date && moment.isMoment(date)) {
      const formattedDate = date.format('DD-MM-YYYY');
      this.yourForm.get('dateOfBirth').setValue(formattedDate, { emitEvent: false });
    }
  })
  

  如果你不想用moment，可以用原生JS实现格式化方法替换即可：

  function formatToDDMMYYYY(date: Date): string {
    const day = String(date.getDate()).padStart(2, '0');
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const year = date.getFullYear();
    return `${day}-${month}-${year}`;
  }
  

方案2：自定义ControlValueAccessor（无额外依赖） #

如果需要全局复用该逻辑，可以自定义一个支持直接输出DD-MM-YYYY字符串的日期选择器组件，实现ControlValueAccessor接口，内部自动完成Date对象到格式化字符串的转换，使用时和普通表单控件完全一致，提交时直接拿到目标格式值。

配置完成后，表单提交时直接调用this.yourForm.value拿到的dateOfBirth字段就是DD-MM-YYYY格式的字符串，无需额外处理。

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