Angular JS 自定义验证器因“ng-invalid-maxlength”而失败

Question

我写了一个自定义验证器，你可以在下面找到它，当输入一个值时它工作正常但是当预加载某些东西时，在编辑表单上，它失败并显示 ng-invalid-maxlength 但 ng-valid-negative .

当我删除 ba-non-negative 时一切正常。谁能解释一下哪里出了问题？

用法

<input type="text" ba-non-negative ng-model="bookCreateForm.quantity" maxlength="5"/>

非否定指令

'use strict';

angular.module('booksApp')
    .directive('baNonNegative', function () {
        return {
            require: 'ngModel',
            link: function (scope, elem, attr, ngModel) {

                ngModel.$parsers.unshift(function (value) {
                    ngModel.$setValidity('negative', +value >= 0);
                    return +value;
                });

                ngModel.$formatters.unshift(function (value) {
                    ngModel.$setValidity('negative', +value >= 0);
                    return +value;
                });
            }
        };
    });

编辑 -

这是 jsfiddle 的 link - http://jsfiddle.net/shvz9g28/1/

我正在使用 angular 1.3.5

Answer 1

在格式化程序验证中，如果 return 值小于零，则 return 空字符串

ngModel.$formatters.unshift(function (value) {

    ngModel.$setValidity('negative', +value >= 0);

        if (+value < 0) return '';
              return +value;
    });

HTML:

<script>
    var app = angular.module('plunker', []);

    app.controller('MainCtrl', function($scope) {
      $scope.list_of_items = ['this', 'that', 'the other'];
      $scope.bookCreateForm = {};
      //$scope.bookCreateForm.quantity = -2;
    });

    app.directive('baNonNegative', function () {
    return {
        require: 'ngModel',
        link: function (scope, elem, attr, ngModel) {

            ngModel.$parsers.unshift(function (value) {
                ngModel.$setValidity('negative', +value >= 0);
                return +value;
            });

            ngModel.$formatters.unshift(function (value) {
                ngModel.$setValidity('negative', +value >= 0);

                if (+value < 0) {
                    ngModel.$commitViewValue();
                    return '';
                }
                return (+value) ? +value : '';
            });
        }
    };
});

</script>



<input type="text" ba-non-negative ng-model="bookCreateForm.quantity" maxlength="5"/>

Answer 2

我将值作为数字返回，angular 有自己的最大长度验证器，用于检查 viewValue.length <= maxlength; 对于数字总是 returns false。

  ctrl.$validators.maxlength = function(modelValue, viewValue) {
    console.log(viewValue.length );
    return ctrl.$isEmpty(modelValue) || viewValue.length <= maxlength;
  };

简单检查

var a = 1;
a.length <= 5 //false

Angular JS 自定义验证器因“ng-invalid-maxlength”而失败

Angular JS custom validator fails with `ng-invalid-maxlength`

javascript

validation

angularjs