Angular10响应式表单日期输入框设置今日默认值报错如何解决？

• TS2322报错原因：你定义的addEventFormInitialValues中每个表单字段的配置都是**[初始值, 校验规则]**的数组结构，直接将格式化后的字符串赋值给整个eventDate属性，不符合类型定义，因此触发类型不匹配错误。
• Date对象赋值不显示原因：原生<input type="date">控件仅识别yyyy-MM-dd格式的字符串值，传入Date对象无法被解析，所以输入框没有展示默认值。

前置依赖确认 #

如果你在组件中使用DatePipe进行日期格式化，需要先在组件的providers中注入DatePipe，避免运行时报错：

import { Component } from '@angular/core';
import { DatePipe } from '@angular/common';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  // 你的组件其他配置，比如selector、templateUrl等
  providers: [DatePipe]
})
export class YourComponent {
  // 组件其他属性
  constructor(
    private fb: FormBuilder,
    private datePipe: DatePipe
  ) {}
}

方案1：初始化表单时直接设置默认值 #

将格式化后的今日日期放在字段配置数组的第一个位置（对应初始值位）：

addEventForm: FormGroup;
addEventFormInitialValues = {
  eventType: ['', Validators.required],
  eventDate: [this.datePipe.transform(new Date(), 'yyyy-MM-dd'), Validators.required]
};

// 初始化FormGroup
ngOnInit() {
  this.addEventForm = this.fb.group(this.addEventFormInitialValues);
}

方案2：表单已初始化后动态赋值 #

如果你的FormGroup已经创建完成，需要动态修改日期值，使用patchValue方法：

// 表单已初始化完成后调用
this.addEventForm.patchValue({
  eventDate: this.datePipe.transform(new Date(), 'yyyy-MM-dd')
});

动态修改初始值配置的正确写法 #

如果你需要先修改初始值配置再初始化表单，不要直接替换整个eventDate数组，修改数组的第一个元素即可：

this.addEventFormInitialValues.eventDate[0] = this.datePipe.transform(new Date(), 'yyyy-MM-dd');
// 再执行表单初始化逻辑
this.addEventForm = this.fb.group(this.addEventFormInitialValues);

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