如何調用輸入標籤的驗證功能

Question

我正在學習angularjs。在這裏，我正在驗證中遇到問題。

我有一個輸入郵編的文本框，並驗證它後返回一個真正的錯誤值。

我已經定義了控制器內部的功能，但越來越不知道如何O調用它的文本框

<input type="text" placeholder="Postcode" ng-model="myprofile.postCode" > 

.controller("MyProfileCtrl", function ($scope, $rootScope) { 
     $scope.myprofile = {}; 
     $scope.myprofile.postCode = ""; 

     $scope.checkPostCodeError = function(){ 
      var newPostCode = checkPostCode ($scope.myprofile.postCode); // calling a javascript function 
      if (newPostCode) { 
       $scope.myprofile.postCode = newPostCode; 
       return true; 
      } 
      else return false; 
    } 

checkPostCode功能有不同的正則表達式檢查它是否數學返回true，否則返回false。

我如何實現驗證。

Answer 1

最簡單的方法是綁定validate功能input的事件，如：

<input ng-change='checkPostCodeError' or ng-keyup='checkPostCodeError' /> 

此外，還可以使用$watch觀看myprofile.postCode代替。

但是，表單控件是特殊處理的角度。這意味着角度有許多內置的驗證功能/指令。你可以創建你自己的驗證指令。

這裏是一個演示：

app.directive('postCodeValidation', function() { 
    function checkPostCodeError(postCode) { 
     if(/*your check logic*/) { 
      return true; 
     } else { 
      return false; 
     } 
    } 
    return { 
     require: 'ngModel', 
     link: function (scope, elem, attrs, ctrl) { 
      ctrl.$parsers.unshift(function (viewValue) { 
       if (checkPostCodeError(viewValue)) { 
        // it is valid 
        ctrl.$setValidity('postCode', true); 
        return viewValue; 
       } else { 
        // it is invalid, return undefined (no model update) 
        ctrl.$setValidity('postCode', false); 
        return undefined; 
       } 
      }); 
     } 
    }; 
}); 

// how to use in template 
<form> 
<input type="text" placeholder="Postcode" ng-model="myprofile.postCode" name="postCode" post-code-validation/><br /><span ng-show="form.postCode.$error.postCode">This is not valid postCode!</span> 
</form>