[angularjs] AngularJS 양식에 사용자 정의 유효성 검사를 추가하는 방법은 무엇입니까?

최신 정보:

동일한 기능을 가진 이전 지시문의 개선 및 단순화 된 버전 (2 개 대신 1 개) :

.directive('myTestExpression', ['$parse', function ($parse) {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attrs, ctrl) {
            var expr = attrs.myTestExpression;
            var watches = attrs.myTestExpressionWatch;

            ctrl.$validators.mytestexpression = function (modelValue, viewValue) {
                return expr == undefined || (angular.isString(expr) && expr.length < 1) || $parse(expr)(scope, { $model: modelValue, $view: viewValue }) === true;
            };

            if (angular.isString(watches)) {
                angular.forEach(watches.split(",").filter(function (n) { return !!n; }), function (n) {
                    scope.$watch(n, function () {
                        ctrl.$validate();
                    });
                });
            }
        }
    };
}])

사용법 예 :

<input ng-model="price1"
       my-test-expression="$model > 0"
       my-test-expression-watch="price2,someOtherWatchedPrice" />
<input ng-model="price2"
       my-test-expression="$model > 10"
       my-test-expression-watch="price1"
       required />

결과 : 다른 지시어 모델과 현재 모델의 변경시 유효성 검사기가 실행되는 상호 의존적 테스트 식입니다.

테스트 표현식에는 지역 $model변수가 있으며 다른 변수와 비교하는 데 사용해야합니다.

이전 :

추가 지시문을 추가하여 @Plantface 코드를 개선하려고 시도했습니다. 이 추가 지시문은 둘 이상의 ngModel 변수에서 변경이 수행 될 때 표현식을 실행해야하는 경우 매우 유용합니다.

.directive('ensureExpression', ['$parse', function($parse) {
    return {
        restrict: 'A',
        require: 'ngModel',
        controller: function () { },
        scope: true,
        link: function (scope, element, attrs, ngModelCtrl) {
            scope.validate = function () {
                var booleanResult = $parse(attrs.ensureExpression)(scope);
                ngModelCtrl.$setValidity('expression', booleanResult);
            };

            scope.$watch(attrs.ngModel, function(value) {
                scope.validate();
            });
        }
    };
}])

.directive('ensureWatch', ['$parse', function ($parse) {
    return {
        restrict: 'A',
        require: 'ensureExpression',
        link: function (scope, element, attrs, ctrl) {
            angular.forEach(attrs.ensureWatch.split(",").filter(function (n) { return !!n; }), function (n) {
                scope.$watch(n, function () {
                    scope.validate();
                });
            });
        }
    };
}])

교차 검증 필드를 만드는 데 사용하는 방법의 예 :

<input name="price1"
       ng-model="price1"
       ensure-expression="price1 > price2"
       ensure-watch="price2" />
<input name="price2"
       ng-model="price2"
       ensure-expression="price2 > price3"
       ensure-watch="price3" />
<input name="price3"
       ng-model="price3"
       ensure-expression="price3 > price1 && price3 > price2"
       ensure-watch="price1,price2" />

ensure-expression경우 검증 모델 실행 ng-model또는 임의의 ensure-watch변수를 변화시킨다.