Angular 14：如何验证驾照签发日期不晚于到期日期？

要完成签发日期不得晚于到期日期的验证，需要从表单级验证和日期联动优化两方面入手，具体实现步骤如下：

1. 编写表单级自定义验证器 #

在组件类中定义一个验证器函数，专门对比两个日期字段的时间逻辑：

// 自定义验证器：确保签发日期不晚于到期日期
dateRangeValidator(group: FormGroup): ValidationErrors | null {
  const issuedDate = group.get('issuedDate')?.value;
  const expiryDate = group.get('expiryDate')?.value;
  
  if (issuedDate && expiryDate) {
    // 转换为时间戳做数值对比
    const issuedTimestamp = new Date(issuedDate).getTime();
    const expiryTimestamp = new Date(expiryDate).getTime();
    
    if (issuedTimestamp > expiryTimestamp) {
      return { dateRangeInvalid: true };
    }
  }
  return null;
}

2. 将验证器绑定到表单组 #

修改createProfile方法，在创建表单时把自定义验证器关联到整个表单组：

createProfile() {
  this.createProfileForm = this.fb.group({
    issuedDate: ['', [Validators.required]],
    expiryDate: ['', [Validators.required]]
  }, { validators: this.dateRangeValidator }); // 绑定表单级验证器
}

3. 动态联动日期可选范围 #

监听签发日期的变化，自动更新到期日期的最小可选值，从根源避免用户选择无效日期：

ngOnInit(): void {
  this.createProfile();
  
  // 监听签发日期变更，同步更新到期日期的最小可选值
  this.createProfileForm.get('issuedDate')?.valueChanges.subscribe(issuedDate => {
    if (issuedDate) {
      const minExpiry = new Date(issuedDate);
      minExpiry.setDate(minExpiry.getDate() + 1); // 到期日期至少比签发日期晚1天
      this.minExpiryDate = minExpiry;
    } else {
      // 签发日期清空时，恢复默认最小日期
      this.minExpiryDate = new Date();
      this.minExpiryDate.setDate(this.minExpiryDate.getDate() + 1);
    }
  });
}

4. 更新模板显示错误提示 #

修改HTML模板，添加表单级错误提示，并确保到期日期的最小日期绑定正确：

<div class="row" [formGroup]="createProfileForm">
  <!-- 签发日期模块 -->
  <div class="col-md-6">
    <div class="form-group">
      <label for="issuedDate">Issued Date</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
        </div>
        <input type="text"
               placeholder="DD-MM-YYYY"
               class="form-control"
               formControlName='issuedDate'
               bsDatepicker
               [minDate]="minIssuedDate"
               [bsConfig]="{ isAnimated: true, dateInputFormat: 'DD-MM-YYYY', returnFocusToInput: true, showClearButton: true, clearPosition: 'right' }">
      </div>
      <div *ngIf="fc['issuedDate'].touched && fc['issuedDate'].invalid" class="alert alert-danger">
        <div *ngIf="fc['issuedDate'].errors && fc['issuedDate'].errors['required']">Issued Date field is required!</div>
      </div>
    </div>
  </div>

  <!-- 到期日期模块 -->
  <div class="col-md-6">
    <div class="form-group">
      <label for="expiryDate">Expiry Date<span style="color:red;">*</span></label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
        </div>
        <input type="text"
               placeholder="DD-MM-YYYY"
               class="form-control"
               formControlName='expiryDate'
               bsDatepicker
               [minDate]="minExpiryDate" <!-- 绑定动态更新的最小日期 -->
               [bsConfig]="{ isAnimated: true, dateInputFormat: 'DD-MM-YYYY', returnFocusToInput: true, showClearButton: true, clearPosition: 'right' }">
      </div>
      <div *ngIf="fc['expiryDate'].touched && fc['expiryDate'].invalid" class="alert alert-danger">
        <div *ngIf="fc['expiryDate'].errors && fc['expiryDate'].errors['required']">Expiry Date field is required!</div>
      </div>
    </div>
  </div>

  <!-- 表单级错误提示 -->
  <div class="col-12">
    <div *ngIf="createProfileForm.invalid && createProfileForm.touched" class="alert alert-danger">
      <div *ngIf="createProfileForm.errors && createProfileForm.errors['dateRangeInvalid']">
        Issued Date cannot be later than Expiry Date!
      </div>
    </div>
  </div>
</div>

补充说明 #

确保组件中已定义fc getter来简化表单控件的访问：

get fc() {
  return this.createProfileForm.controls;
}

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