如何在输入标签上调用验证函数

Question

我正在学习 angularjs。我在验证中遇到了问题。

我有一个文本框，它接受邮政编码的输入，并在验证后返回一个真假值。

我已经在控制器内部定义了函数，但不知道如何在文本框上调用它

<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。

但是，表单控件在角度上进行了特殊处理。这意味着 Angular 有许多内置的验证函数/指令。您可以创建自己的验证指令。

这是一个演示：

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>