角表單驗證 - 最小元素不能超過最大元素更大

我有一些簡單的驗證在我的範圍內輸入這樣的：角表單驗證 - 最小元素不能超過最大元素更大

<form name="form" novalidate> 
    Min: <input type="number" name="min" ng-model="rangemin" ng-pattern="/^[0-9]+$/"> 
    Max: <input type="number" name="max" ng-model="rangemax" ng-pattern="/^[0-9]+$/"> 
    </form>

我加了班ng-valid（綠色）和ng-invalid（紅）色我的CSS，以便它被正確繪製和輸入保存在ng-model變量。這工作正常，但我想進行一些額外的驗證。如果min大於max，則max或max小於min，則輸入不應有效。

我該如何做到這一點？

我是Angular的新手，我可以製作指令，控制器等，但我不知道如何驗證兩個輸入並在其上設置無效狀態。

來源

2015-03-18 S3B4ST14N

您可以手動爲angular form$error對象編寫東西。您可以編寫自己的自定義驗證（也許使用指令），並將驗證附加到控制器的屬性（如給出的客戶驗證示例中）。

app.directive('customValidation', function() { 
    return { 
     require: 'ngModel', 
      link: function(scope, elm, attrs, controller) { 
       controller.$validators.customValidation = function() { 
        //your validation here 
        return isValid; 
       } 
    ...

你只需要使用這個指令在HTML類似

<form name="form" novalidate> 
Min: <input type="number" name="min" ng-model="rangemin" custom-validation ng-pattern="/^[0-9]+$/"> 
Max: <input type="number" name="max" ng-model="rangemax" custom-validation ng-pattern="/^[0-9]+$/"> 
</form>

或者，（這是一個有點哈克），您可以手動觀看和手動設置$error對象，像什麼像

$scope.$watch('rangemin', function() { 
    if ($scope.rangemin > $scope.rangemax) 
     $scope.form['rangemin'].$error.customerValidation = true; //an error exists 
});

來源

2015-03-18 22:13:12 ryanyuyu

我認爲這是一個很好的方法

http://jsfiddle.net/jhebr7z8/

但你需要使用這些指令

app.directive('ngMin', function() { 
app.directive('ngMax', function() {

來源

2015-03-18 22:14:56

您可以使用HTML屬性的最小值和最大值和模型值從字段如下：

<form name="form" novalidate> 
Min: <input type="number" name="min" ng-model="rangemin" ng-pattern="/^[0-9]+$/" max="{{rangemax || 9999}}"> 
Max: <input type="number" name="max" ng-model="rangemax" ng-pattern="/^[0-9]+$/" min="{{rangemin || 1}}"> 
</form>

然後你的條件顯示錯誤消息可以是：（form.min。$ error.max || form.max。$ error.min）& &（form.min。$ dirty || form.max。$ dirty）。

來源

2015-11-03 18:32:18 Dorotka

角表單驗證 - 最小元素不能超過最大元素更大

回答

相關問題