如何在Angular5表单中实现日期比较条件验证？

完全不用额外引入第三方库！Angular 5自带的表单验证机制就能完美搞定这个需求，因为是两个字段的关联验证，我们需要写自定义验证器，下面给你两种适配你现有代码的方案：

方案一：基于模板驱动表单（适配你当前的ngModel写法） #

首先我们需要创建一个自定义验证指令，用来关联dateOne和dateTwo的比较逻辑：

1. 编写自定义验证指令 #

创建一个date-less-than.directive.ts文件：

import { Directive, Input } from '@angular/core';
import { Validator, AbstractControl, NG_VALIDATORS } from '@angular/forms';

@Directive({
  selector: '[dateLessThan]',
  providers: [{
    provide: NG_VALIDATORS,
    useExisting: DateLessThanDirective,
    multi: true
  }]
})
export class DateLessThanDirective implements Validator {
  // 接收要比较的目标字段名（比如dateOne）
  @Input('dateLessThan') targetField: string;

  validate(control: AbstractControl): { [key: string]: any } | null {
    // 获取目标字段的控件实例
    const targetControl = control.root.get(this.targetField);
    
    if (targetControl && control.value) {
      // 把日期字符串转成Date对象做比较
      const currentDate = new Date(control.value);
      const targetDate = new Date(targetControl.value);
      
      // 如果当前字段（dateTwo）大于目标字段（dateOne），返回错误标记
      if (currentDate > targetDate) {
        return { 'dateLessThan': true };
      }
    }
    return null;
  }
}

然后在你的模块里声明这个指令，确保能在模板中使用。

2. 修改表单模板 #

给dateTwo的输入框添加验证指令，并添加错误提示：

<div class="modal-body">
  <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" [(ngModel)]="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" placeholder=".form-control-sm" [(ngModel)]="dateOne">
    </div>
  </div>
  <!-- 修改dateTwo的表单组，添加验证和错误提示 -->
  <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" 
             placeholder=".form-control-sm" 
             [(ngModel)]="dateTwo"
             #dateTwoCtrl="ngModel"
             dateLessThan="dateOne">
      <!-- 当验证不通过时显示错误提示 -->
      <div *ngIf="dateTwoCtrl.errors?.dateLessThan && dateTwoCtrl.touched" class="text-danger">
        Date two不能大于Date one！
      </div>
    </div>
  </div>
</div>
<!-- 可选：给按钮添加禁用状态，避免无效提交 -->
<button type="button" 
        class="btn btn-primary" 
        (click)="addProjecToClients()"
        [disabled]="dateTwoCtrl.errors?.dateLessThan">Save changes</button>

3. 完善提交方法 #

在组件的提交方法里再做一层校验，确保万无一失：

addProjecToClients() {
  // 先检查日期是否合法
  if (this.dateOne && this.dateTwo) {
    const d1 = new Date(this.dateOne);
    const d2 = new Date(this.dateTwo);
    if (d2 > d1) {
      // 可以在这里手动触发控件的触摸状态，让错误提示显示
      // 或者直接给出提示
      alert("Date two不能大于Date one！");
      return;
    }
  }
  // 这里写正常的表单提交逻辑
}

方案二：基于响应式表单（更推荐的复杂表单处理方式） #

如果你的表单后续可能增加更多验证规则，响应式表单会更易维护：

1. 初始化表单组 #

在组件里用FormBuilder创建表单，并添加交叉字段验证：

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

@Component({
  // 你的组件元数据
})
export class YourComponent {
  contractForm: FormGroup;
  _listClients: any[];

  constructor(private fb: FormBuilder) {
    // 初始化表单组，添加字段和验证规则
    this.contractForm = this.fb.group({
      selectedPersonId: ['', Validators.required],
      dateOne: ['', Validators.required],
      dateTwo: ['', Validators.required]
    }, { 
      // 添加表单级别的交叉验证器
      validators: this.dateCompareValidator 
    });
  }

  // 自定义交叉验证函数
  dateCompareValidator(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);
      if (d2 > d1) {
        return { 'dateTwoGreater': true };
      }
    }
    return null;
  }

  addProjecToClients() {
    // 检查表单是否有效
    if (this.contractForm.invalid) {
      // 标记所有字段为已触摸，让错误提示显示
      this.contractForm.markAllAsTouched();
      return;
    }
    // 提交逻辑：可以通过this.contractForm.value获取表单数据
  }
}

2. 修改为响应式表单模板 #

<div class="modal-body" [formGroup]="contractForm">
  <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" 
             placeholder=".form-control-sm" 
             formControlName="dateOne">
    </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" 
             placeholder=".form-control-sm" 
             formControlName="dateTwo">
      <!-- 显示交叉验证错误 -->
      <div *ngIf="contractForm.hasError('dateTwoGreater') && contractForm.get('dateTwo').touched" class="text-danger">
        Date two不能大于Date one！
      </div>
    </div>
  </div>
</div>
<!-- 按钮根据表单状态自动禁用 -->
<button type="button" 
        class="btn btn-primary" 
        (click)="addProjecToClients()"
        [disabled]="contractForm.invalid">Save changes</button>

关键说明 #

• Angular 5自带的FormsModule（模板驱动）和ReactiveFormsModule（响应式）完全满足需求，不需要额外工具库
• 两种方案都能实现实时验证：当用户选择dateTwo后，验证器会自动触发，立刻显示错误提示
• 建议优先使用响应式表单，尤其是当表单规则复杂、需要动态修改验证规则时，维护成本更低

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