AngularJS自定义日期验证：确保hiring_date不大于expiry_date

我明白你的问题了——你已经能正确判断日期的大小关系并显示错误提示，但就是没法让expiry_date字段像必填项那样进入$invalid状态，导致表单整体的验证状态没跟上，对吧？

首先得说清楚：纯视图层很难实现真正的字段无效状态标记，因为Angular的表单控件$invalid状态是由内部验证器管理的，必须通过控制器或自定义指令来修改它的验证状态。不过我会给你两种方案：一种是标准的Angular自定义验证实现（能真正触发$invalid），另一种是视图层模拟样式的临时办法。

方案一：标准实现（真正触发$invalid状态） #

这是Angular表单验证的常规做法，通过控制器监听日期变化，调用$setValidity来标记字段的验证状态：

1. 在控制器中添加验证逻辑
   监听hiring_date和expiry_date的变化，判断日期顺序后设置字段的自定义验证状态：

   $scope.$watchGroup(['hiring_date', 'expiry_date'], function(newValues) {
     const hiringDate = newValues[0];
     const expiryDate = newValues[1];
     
     // 确保两个日期都存在时才验证
     if (hiringDate && expiryDate) {
       // 注意：Angular UI日期选择器绑定的是Date对象，直接比较即可
       const isDateInvalid = expiryDate < hiringDate;
       // 给expiry_date字段添加自定义验证标识"dateBeforeHiring"
       $scope.formStep1.expiry_date.$setValidity('dateBeforeHiring', !isDateInvalid);
     } else {
       // 任一日期为空时，清除该验证错误
       $scope.formStep1.expiry_date.$setValidity('dateBeforeHiring', true);
     }
   });
   

2. 修改视图中的输入框和错误提示
   去掉你之前无效的ng-required绑定，保留正常的必填规则（如果需要的话），然后用自定义的验证标识来显示错误：

   <!-- 修正后的expiry_date输入框 -->
   <input 
     datepicker-options="dateOptions" 
     type="text" 
     class="form-control" 
     ng-model="expiry_date" 
     is-open="config2.opened" 
     uib-datepicker-popup="yyyy-MM-dd" 
     close-text="Close" 
     name="expiry_date" 
     show-button-bar="false" 
     ng-required="true" <!-- 如果需要必填就保留，不需要则删除 -->
   />
   
   <!-- 错误提示部分 -->
   <!-- 原有的格式/必填错误提示 -->
   <small ng-show="formStep1.expiry_date.$invalid && formStep1.expiry_date.$touched && formStep1.expiry_date.$error.required" class="errorMsg">
     Please enter valid date (YYYY-MM-DD).
   </small>
   <!-- 新增的日期顺序错误提示，用自定义验证标识 -->
   <small ng-show="formStep1.expiry_date.$touched && formStep1.expiry_date.$error.dateBeforeHiring" class="errorMsg">
     Expiry Date should not be older than Target Hiring Date.
   </small>
   

这样设置后，当expiry_date早于hiring_date时，字段会自动进入$invalid状态，表单的整体$invalid也会被触发，和必填项的验证逻辑完全一致。

方案二：视图层临时模拟样式（仅视觉效果） #

如果只是想让字段显示"无效"的样式（比如红色边框），不想改动控制器，可以用ng-class在视图中直接判断：

<input 
  ...
  ng-class="{'has-error': formStep1.expiry_date.$modelValue < formStep1.hiring_date.$modelValue && formStep1.expiry_date.$touched}"
/>

但这种方法只是视觉上的模拟，并不会真正让字段进入$invalid状态，表单的整体验证状态也不会受到影响，所以不推荐用于需要控制表单提交的场景。

注意事项 #

• 确保hiring_date和expiry_date都是Date类型（Angular UI日期选择器默认会把ng-model绑定为Date对象，如果你做了字符串转换，需要先转成Date再比较）。
• 如果你不想用$watch，也可以在两个日期输入框上都添加ng-change="validateDateOrder()"，然后在控制器中定义validateDateOrder方法，逻辑和上面的$watch内容一致。

内容的提问来源于stack exchange，提问作者Mr world wide