Angular响应式表单无法为datepicker设置默认日期值如何解决？

核心原因 #

原生input type="date"仅支持YYYY-MM-DD格式的日期值作为输入，你之前使用的MM/dd/yyyy格式不符合原生控件的取值规范，无法被识别展示。同时使用响应式表单的formControlName绑定后，控件取值完全由FormGroup管理，手动添加的value属性会被覆盖，不会生效。

解决方案 #

1. 调整日期格式化参数，将输出格式改为yyyy-MM-dd
2. 移除HTML中多余的value属性，避免与表单控件逻辑冲突

修正后的TS代码

FormGroup初始化：

constructor(
    private fb: FormBuilder,
  ) {
   this.myForm = this.fb.group({
        myStartDt: [formatDate('01/01/2021', 'yyyy-MM-dd', 'en')]
});
}

主动赋值逻辑：

this.myForm.setValue({
  myStartDt: formatDate('01/01/2021', 'yyyy-MM-dd', 'en')
});

修正后的HTML代码

<div class="form-contrl-margin-bottom">
  <input type="date" class="form-control form-cntrl" formControlName="myStartDt"> 
</div>

如果业务需要提交MM/dd/yyyy格式的日期，在表单提交时再对myStartDt的值做一次格式转换即可，不影响前端控件的正常展示。

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