Angular5日期校验报错：this.dateOne.getTime is not a function求解

首先，咱们来定位问题：你遇到的TypeError: this.dateOne.getTime is not a function，根源是**input type="date"返回的是字符串类型（ISO格式，比如"2024-05-20"），而不是Date对象**。你直接对字符串调用getTime()方法，自然会报错。

下面给你两种解决方案，从快速修复到更符合Angular表单规范的实现：

方案一：快速修复validation函数 #

把字符串转换成Date对象后再进行比较，修改你的validation()方法：

validation() {
  if(this.dateOne && this.dateTwo){
    // 将输入的日期字符串转为Date对象
    const date1 = new Date(this.dateOne);
    const date2 = new Date(this.dateTwo);
    // 逻辑匹配需求：当dateOne > dateTwo时返回true，触发错误提示
    return date1.getTime() > date2.getTime();
  }
  // 当任一日期为空时，不显示错误（可根据需求调整）
  return false;
}

这样修改后，就能正常比较两个日期的大小，不会再出现getTime相关的错误。

方案二：使用Angular表单自定义验证器（推荐） #

直接依赖ngModel变量不是Angular表单的最佳实践，更好的方式是给表单组添加自定义验证器，这样能和表单的valid状态联动，逻辑更规范：

1. 修改TS文件，添加自定义验证器 #

import { FormBuilder, FormGroup, Validators, ValidationErrors, ValidatorFn } from '@angular/forms';

export class ProjectsComponent implements OnInit {
  form: FormGroup;

  ngOnInit() {
    this.doSearch();
    // 定义日期范围校验的自定义验证器
    const dateRangeValidator: ValidatorFn = (group: FormGroup): ValidationErrors | null => {
      const dateOne = group.get('dateOne')?.value;
      const dateTwo = group.get('dateTwo')?.value;
      
      if (dateOne && dateTwo) {
        const d1 = new Date(dateOne);
        const d2 = new Date(dateTwo);
        // 如果dateOne > dateTwo，返回错误标记
        return d1.getTime() > d2.getTime() ? { dateRangeInvalid: true } : null;
      }
      return null;
    };

    // 给表单组绑定自定义验证器
    this.form = this.formBuilder.group({
      dateOne: ['', Validators.required],
      dateTwo: ['', Validators.required],
      selectedPersonId: ['', Validators.required]
    }, { validators: dateRangeValidator });
  }
}

2. 修改HTML文件，根据表单错误状态显示提示 #

<div class="form-group row">
  <label class="col-sm-5 col-form-label" for="input-small">Date two : </label>
  <div class="col-sm-6">
    <input type="date" id="input-small" name="input-small" class="form-control form-control-sm" 
           formControlName="dateTwo">
    <!-- 根据表单组的错误状态显示提示 -->
    <span style="color:red" *ngIf="form.hasError('dateRangeInvalid')">
      DateTwo must be greater than dateone
    </span>
  </div>
</div>

这种方式的优势在于：

• 完全基于Angular表单状态管理，不需要依赖ngModel变量
• 表单的valid状态会自动包含自定义验证结果，提交按钮的禁用逻辑更准确

额外注意点 #

你在HTML中同时使用了[(ngModel)]和formControlName，在Angular 5中，当控件属于formGroup时，这种混合使用虽能工作，但可能引发不必要的状态同步问题。建议移除[(ngModel)]="dateOne"和[(ngModel)]="dateTwo"，完全通过form.get('dateOne')?.value来获取值。

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