TypeScript中获取<input type=date>值显示undefined的解决方法

问题原因 #

你的代码打印undefined通常有两个核心原因：

1. DOM加载时机过早：代码执行时，<input>元素还未被浏览器渲染完成，document.getElementById('startDate')返回null，因此startDate?.value为undefined。
2. Angular环境下的不当操作：你使用了formControlName，说明这是Angular项目，直接用原生DOM获取值不符合Angular的表单绑定逻辑，可能因组件生命周期或变更检测导致获取失败。

解决方案 #

方案1：原生TS场景（确保DOM加载完成） #

将代码放在DOMContentLoaded事件回调中，确保元素已渲染，同时监听用户输入事件获取值：

document.addEventListener('DOMContentLoaded', () => {
  const startDate = document.getElementById('startDate') as HTMLInputElement | null;
  
  // 监听用户选择日期的事件，实时打印值
  startDate?.addEventListener('change', () => {
    console.log(startDate.value);
  });

  // 打印初始值（未选择时为空字符串）
  console.log(startDate?.value);
});

方案2：Angular场景（推荐，符合框架规范） #

利用Angular的表单控件API获取值，无需原生DOM操作：

1. 组件中定义表单控件：

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

@Component({
  selector: 'app-survey',
  templateUrl: './survey.component.html'
})
export class SurveyComponent implements OnInit {
  // 定义表单组
  surveyForm = new FormGroup({
    startDate: new FormControl(''),
    endDate: new FormControl('')
  });

  ngOnInit(): void {
    // 监听startDate值的变化
    this.surveyForm.get('startDate')?.valueChanges.subscribe(value => {
      console.log('选择的开始日期：', value);
    });
  }

  // 主动获取值的方法（比如按钮点击时调用）
  getStartDateValue(): void {
    console.log('当前开始日期：', this.surveyForm.get('startDate')?.value);
  }
}

2. 保持原有HTML不变：

<input formControlName="startDate" id="startDate" type="date"/>
<!-- 可添加按钮测试主动获取 -->
<button (click)="getStartDateValue()">打印开始日期</button>

补充说明 #

你提供的示例代码使用change事件监听是正确的逻辑——只有用户选择日期后，输入框的value才会有有效内容，初始状态下value为空字符串而非undefined，若仍出现undefined，优先检查代码执行时机是否在DOM渲染完成之后。

内容的提问来源于stack exchange，提问作者Rebja A.