Angular中设置type="date"输入框默认显示当前日期的方法

嘿，我看了你的代码，有几个小细节没处理对，导致日期输入框没默认显示当前日期，咱们一步步来修正：

1. 先搞定绑定和变量名的拼写问题 #

• Angular的表单控件绑定要用[formControl]（驼峰式写法），你写的[form-control]是错误的，指令名称不对就没法正确绑定。
• 你的组件类里变量名是EnrollementDate，但HTML模板里写的是EnrollmentDate（少了一个l），变量名必须完全一致才能对应上，这也是绑定失败的原因之一。

2. 转换日期格式为HTML输入框支持的类型 #

HTML的type="date"输入框只认YYYY-MM-DD格式的字符串，直接传Date对象是不行的，咱们得把当前日期转换成符合要求的字符串。

修正后的组件代码 #

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

export class AppComponent {
  // 修正变量名拼写，同时把日期转成YYYY-MM-DD格式的字符串
  EnrollmentDate = new FormControl(new Date().toISOString().slice(0, 10));
}

修正后的HTML模板代码 #

<div class="form-outline mb-4"> 
  <label class="form-label" for="enroll"><b>User Enrollement Date</b></label> 
  <!-- 修正formControl绑定，顺便把label的for和input的id统一，提升交互体验 -->
  <input type="date" class="form-control" id="enroll" name="date" required [formControl]="EnrollmentDate"/> 
</div>

补充说明 #

• new Date().toISOString()会生成带时分秒的完整ISO字符串（比如2024-05-20T14:30:00.000Z），用.slice(0,10)截取前10位，正好得到YYYY-MM-DD的纯日期格式，完美适配date输入框。
• 另外我把label的for和input的id改成了一致的enroll，这样用户点击标签文字就能聚焦到输入框，体验更好~

这样修改后，你的日期输入框就会默认显示当前日期啦！

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