使用自定義指令與angularjs的驗證

我有一個表單與輸入字段，並有一個自定義指令爲每個輸入字段驗證輸入的數據user.Requirement是，當用戶離開輸入字段與無效的數據，錯誤信息是顯示。但是，很少的字段是可選的，如果用戶跳過輸出這些字段的任何數據，則不需要驗證。使用自定義指令與angularjs的驗證

我試圖在指令中使用Blur事件來實現這一點，但是這導致甚至在沒有輸入數據的情況下調用vaidation。請告知如果Watch功能可以在這裏使用，任何樣本片段在這裏將不勝感激。我在一個小提琴中寫了代碼，它與我的指令類似，用於檢查最小長度的輸入字段之一（儘管有一個內置指令，以此爲例）。此小提琴可以在http://jsfiddle.net/4xbv0tgL/49/

<div ng-app="myApp" ng-controller="myCtrl"> 
    <form name="myForm"> 
     Num1: <input type="text" ng-model="num1" my-min-length="5" name="num1" /> 
     <span class="error" ng-hide="myForm.num1.$valid" 
     ng-show="myForm.num1.$error">Invalid Number!</span> 
     <br /> 
     Num2: <input type="text" ng-model="num2" my-min-length="5" name="num2" /> 
     <span class="error" ng-hide="myForm.num2.$valid" 
     ng-show="myForm.num2.$error">Invalid Number!</span> 

    </form> 
</div> 

var myApp = angular.module("myApp", []); 

var myCtrl = myApp.controller("myCtrl",["$scope", function($scope) { 
    $scope.num1 = "12345"; 
    $scope.num2 = "55555"; 
}]); 

myApp.directive("myMinLength", function() { 
    return { 
     restrict: "A", 
     require: "ngModel", 
     link: function (scope, element, attr, ngModelCtrl) { 
      var minlength = Number(attr.myMinLength); 
       var inputparse = function (inputtext) { 
        if ((inputtext.length >= minlength) && (!isNaN(inputtext))) { 
         return inputtext; 

        } 
        return undefined; 
       } 
       ngModelCtrl.$parsers.push(inputparse); 

       element.bind("blur", function() { 

        var value = inputparse(element.val()); 
        var isValid = !!value; 
        if (isValid) { 
         ngModelCtrl.$setViewValue(value); 
         ngModelCtrl.$render(); 

        } 
        ngModelCtrl.$setValidity("myMinLength", isValid); 
        scope.$apply(); 
       } 
      ); 
     } 
    }; 
});

來源

2014-10-18 user4157127

我覺得你已經過了複雜的生活了。你爲什麼不使用多個指令進行多重檢查？

<div ng-app="myApp" 
    ng-controller="myCtrl"> 
    <form name="myForm" 
      novalidate> 
     Num1: 
     <input type="text" 
       ng-model="num1" 
       ng-minlength="5" 
       integer 
       name="num1" 
       required/> 
     <span class="error" 
       ng-show="myForm.num1.$invalid&&myForm.num1.$touched">Invalid Number!</span> 
    </form> 
</div>

而這裏的integer指令：

var INTEGER_REGEXP = /^[0-9]*$/; 
myApp.directive('integer', function() { 
    return { 
     require: 'ngModel', 
     link: function (scope, elm, attrs, ctrl) { 
      ctrl.$parsers.unshift(function (viewValue) { 
       if (viewValue === "") { 
        ctrl.$setValidity('integer', true); 
        return viewValue; 
       } else if (INTEGER_REGEXP.test(viewValue)) { 
        ctrl.$setValidity('integer', true); 
        return viewValue; 
       } else { 
        ctrl.$setValidity('integer', false); 
        return viewValue; 
       } 
      }); 
     } 
    }; 
});

只是要確保您使用的角1.3或更高版本。因爲0123中不存在$touched和$untouched。

來源

2014-10-18 19:35:03

使用自定義指令與angularjs的驗證

回答

相關問題