Angular5中如何实现日期比较及表单验证？

我来帮你搞定这个日期验证的需求！你现在的思路是对的，但自定义验证器需要正确集成到Angular的响应式表单体系里，这样才能让表单的valid状态准确反映日期的校验结果，按钮的禁用状态也会跟着生效。下面是完整的实现步骤和代码：

第一步：创建跨控件的自定义验证器 #

因为我们需要比较两个日期控件的值，所以要写一个表单组级别的自定义验证器（不是单个控件的），这个函数会接收整个表单组作为参数，返回null表示验证通过，返回包含错误信息的对象表示验证失败。

// 自定义日期范围验证器函数
dateRangeValidator(formGroup: FormGroup): ValidationErrors | null {
  const dateOne = formGroup.get('dateOne')?.value;
  const dateTwo = formGroup.get('dateTwo')?.value;

  // 先确保两个日期都有值（required验证已经处理了空值情况，这里是双重保险）
  if (!dateOne || !dateTwo) {
    return null;
  }

  // 转换为Date对象进行比较
  const startDate = new Date(dateOne);
  const endDate = new Date(dateTwo);

  // 如果结束日期早于等于开始日期，返回错误
  if (endDate <= startDate) {
    return { invalidDateRange: true };
  }

  return null;
}

第二步：修改组件的TS代码 #

接下来把这个验证器加到你的表单组里，同时简化代码（可以去掉dateOne和dateTwo的双向绑定，因为响应式表单会自动管理控件值）：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators, ValidationErrors } from '@angular/forms';

export class ProjectsComponent implements OnInit {
  form!: FormGroup;
  _listClients: any[] = []; // 假设你会在doSearch里赋值

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.doSearch();
    this.initForm();
  }

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

  // 自定义验证器函数
  dateRangeValidator(formGroup: FormGroup): ValidationErrors | null {
    const dateOne = formGroup.get('dateOne')?.value;
    const dateTwo = formGroup.get('dateTwo')?.value;

    if (!dateOne || !dateTwo) {
      return null;
    }

    const startDate = new Date(dateOne);
    const endDate = new Date(dateTwo);

    if (endDate <= startDate) {
      return { invalidDateRange: true };
    }

    return null;
  }

  addProjecToClients() {
    // 表单提交逻辑，这里可以通过this.form.value获取所有值
    console.log(this.form.value);
  }

  doSearch() {
    // 你的获取客户列表逻辑
    // this._listClients = ...;
  }
}

第三步：修改HTML模板 #

现在调整模板，去掉不必要的ngModel，并根据表单的错误状态显示提示：

<div class="modal-body">
  <form [formGroup]="form" (ngSubmit)="addProjecToClients()">
    <div class="form-group row">
      <label class="col-sm-5 col-form-label">Choisir un client :</label>
      <div class="col-sm-6">
        <ng-select 
          *ngIf="_listClients" 
          [items]="_listClients" 
          bindLabel="nom" 
          bindValue="id" 
          formControlName="selectedPersonId">
        </ng-select>
      </div>
    </div>

    <label class="col-sm-5 col-form-label">Information liées au contrat :</label>

    <div class="form-group row">
      <label class="col-sm-5 col-form-label">Date one :</label>
      <div class="col-sm-6">
        <input 
          type="date" 
          class="form-control form-control-sm" 
          formControlName="dateOne">
        <!-- 显示dateOne的required错误 -->
        <span style="color:red" *ngIf="form.get('dateOne')?.hasError('required') && form.get('dateOne')?.touched">
          Date one is required
        </span>
      </div>
    </div>

    <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">
        <!-- 显示dateTwo的required错误 -->
        <span style="color:red" *ngIf="form.get('dateTwo')?.hasError('required') && form.get('dateTwo')?.touched">
          Date two is required
        </span>
        <!-- 显示日期范围错误 -->
        <span style="color:red" *ngIf="form.hasError('invalidDateRange') && form.get('dateTwo')?.touched">
          Date two must be later than date one
        </span>
      </div>
    </div>

    <button type="submit" class="btn btn-primary" [disabled]="!form.valid">
      Save changes
    </button>
  </form>
</div>

关键说明 #

1. 表单组验证器：我们把验证器加到了表单组的配置里，这样只要两个日期控件的值变化，就会自动触发验证。
2. 去掉ngModel：响应式表单推荐用formControlName来绑定控件，不需要ngModel，避免双向绑定和响应式表单的冲突。
3. 错误提示逻辑：通过form.hasError('invalidDateRange')来判断是否显示日期范围错误，同时结合touched状态，确保用户交互后才显示提示，提升用户体验。
4. 表单状态联动：按钮的disabled直接依赖form.valid，这样当日期不符合要求时，表单会变成invalid，按钮自动禁用。

这样修改后，就能完美实现你想要的功能：当第二个日期不晚于第一个时，表单验证不通过，显示错误提示，并且提交按钮禁用。

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