AngularJS驗證 - 多重控制和條件/鏈條驗證

Question

使用AngularJS，如何驗證date2 < date1和date3> date2。

<form name='myForm'> 
     date1: <input type='text' name='date1' ng-model='obj.date1' required pattern='datePattern'/> 
       <div ng-show='obj.date2 > obj.date1'>date1 has to be greater than date2</div> 
     date2: <input type='text' name='date2' ng-model='obj.date2' required pattern='datePattern'/> 
     date3: <input type='text' name='date3' ng-model='obj.date3' required pattern='datePattern'/> 

     <input type='button' ng-click='saveData(obj)'/> 
</form> 

用例（用戶輸入）：

• DATE2 = 2013年1月15日
• DATE1 = 2013年1月14日（錯誤顯示出來：DATE1已到 比DATE2更大）
• DATE3 = 2013年1月16日

---

• 用戶更改日期1 = 2013年1月20日（錯誤消失且date1現在有效，因爲date1 = 1/20/2013大於date2 = 2013年1月15日）
• 用戶更改日期2 = 1/30/2013 ---我如何觸發date1中的驗證，因此消息'date1必須大於date2'並且使date1失效？

Answer 1

你可以使用一個函數來比較相關的日期的時間戳，這樣的事情：

function ctrl($scope){ 
$scope.compareDates=function(first, second){ 
    dFirst=new Date(first); 
    dSecond=new Date(second); 
    console.log(first, second, dFirst, dSecond) 
    return dFirst.getTime()<dSecond.getTime(); 
    } 

} 

然後，你可以簡單地使用它的NG-顯示

 <div ng-show='compareDates(obj.date1,obj.date2)'>date1 has to be greater than date2</div> 
     <div ng-show='compareDates(obj.date2,obj.date3)'>date3 has to be greater than date2</div> 

這是爲了日期之間的比較，如果你想使第一個日期無效，如果第二個日期在之前/之後，則可以使用相同的函數並設置像這樣的自定義$錯誤：

$scope.invalidate=function(item){ 
    console.log("invalidate") 
    $scope.myForm[item].$setValidity("notGoodEnough", false); 
} 
$scope.validate=function(item){ 
    console.log("validate") 
    $scope.myForm[item].$setValidity("notGoodEnough", true); 
} 

你可以調用這些函數，只要你想驗證或不字段，在我的小提琴我添加了第三個參數給比較函數來指定哪個字段必須通過比較驗證或不通過比較，我讓你檢查：http://jsfiddle.net/DotDotDot/zYF3U/3/

樂趣

Answer 2

定義上，做的比較範圍的功能。事情是這樣的：

date1: <input type='text' name='date1' ng-model='obj.date1' 
required pattern='datePattern'/> 
<div ng-show="compareDates(obj.date1, obj.date2)"> 
    date1 has to be greater than date2 
</div> 
date2: <input type='text' name='date2' ng-model='obj.date2' 
required pattern='datePattern'/> 

JS：

function myController($scope){ 
    $scope.compareDates = function(d1,d2){   
     /* convert to date object assuming the input d1 = 2013-08-15 */   
     /* or some other valid format */ 
     d1 = new Date(d1); 
     d2 = new Date(d2);   
     return d1 < d2; 
    } 
} 

如果你有直接的控制範圍內的日期，那麼你不需要的日期傳遞給函數。你可以簡單地這樣做：

<div ng-show="compareDates()">date1 has to be greater than date2</div> 

JS：

function myController($scope){ 
    $scope.obj = {}; 

    $scope.compareDates = function(){ 
     /* convert to date objects assuming valid inputs */   
     return new Date($scope.obj.date1) < new Date($scope.obj.date2); 
    } 
}