Angular响应式表单获取日期值触发TypeError问题求助

问题原因 #

你在模板中传递给onSubmit的#f是原生HTML表单元素（HTMLFormElement），并非组件中定义的Angular FormGroup实例dateRangeForm。当onSubmit函数将参数类型声明为FormGroup时，实际传入的DOM元素不存在controls属性，导致读取startDate时触发undefined错误。

解决方法 #

方法1：直接使用组件内的FormGroup实例（推荐） #

无需在模板中传递参数，直接调用组件已声明的dateRangeForm即可：

修改模板的提交事件：

<form [formGroup]="dateRangeForm" (submit)="onSubmit()">
  <div class="card-block">
    <div class="form-group">
      <label for="start-date">Start Date: </label>
      <input id="start-date" type="date" class="form-control" formControlName="startDate"/>
    </div>
    <div class="form-group">
      <label for="end-date">End Date: </label>
      <input id="end-date" type="date" class="form-control" formControlName="endDate">
    </div>
    <div class="card-footer separator">
      <input type="submit" value="Search">
    </div>
  </div>
</form>

修改组件的onSubmit方法：

onSubmit() {
  const startDate: string = this.dateRangeForm.controls["startDate"].getRawValue();
  const endDate: string = this.dateRangeForm.controls["endDate"].value;
  
  // 更简洁的写法：
  // const { startDate, endDate } = this.dateRangeForm.value;
}

方法2：修正模板变量的使用（如需传递表单引用） #

若必须通过模板变量传递表单，需明确获取Angular的FormGroup实例（而非原生DOM元素）：

修改模板的提交事件：

<form [formGroup]="dateRangeForm" (submit)="onSubmit(f.formGroup)" #f>
  <!-- 其余表单内容不变 -->
</form>

此时onSubmit方法的原代码逻辑可正常使用：

onSubmit(form: FormGroup) {
  const startDate: string = form.controls["startDate"].getRawValue();
  const endDate: string = form.controls["endDate"].value;
}

额外注意事项 #

• 确保组件已正确注入FormBuilder，并在ngOnInit或构造函数中完成dateRangeForm的初始化（你的现有代码已满足此要求）。
• 原生type="date"输入框返回ISO格式字符串（如"2024-05-20"），变量类型声明为string是正确的，无需调整。

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