Question

假设我们需要一个自定义Angular验证器，它为错误消息提供参数。例如，如果我们要创建一个验证器，它将评估数组的最小长度，当它无效时，消息应为“最小长度为{0}”。

现在考虑我们已经为此验证创建了一个自定义指令（如下所示），我们如何从验证指令函数向验证消息提供“{0}”参数？

这是一个自定义验证指令：

.directive('arrayLength', function () {
    return {
        require: 'ngModel',
        link: function (scope, elm, attrs, ctrl) {
            ctrl.$validators.arrayLength = function (modelValue, viewValue) {
                return modelValue >= parseInt(attrs.arrayLength);
            };
        }
    };
});

在这里，我们将宣布消息：

.run([
    'defaultErrorMessageResolver',
    function (defaultErrorMessageResolver) {
        defaultErrorMessageResolver.getErrorMessages().then(function (errorMessages) {
            errorMessages['arrayLength'] = 'Minimum length is {0}';
        });
    }
]);

所以...任何想法？

我确信这不是火箭科学。只是我是Angular的新手。

提前致谢。

Answer 1

看看这个。可以在自己的策略上传递消息（“messageerror”）

var app = angular.module("myApp", []);

function Fiddle($scope) {}

app.directive('input', function() {
    return {
        restrict: 'E',
        scope: {
            minlength: "@minlength"
        },
        link: function(scope, elm, attr, ctrl) {
            
            elm.bind('keyup', function() {
                var valid = (this.value && this.value.length >= scope.minlength);
                if (!valid){
                    if(elm.parent().find("span").length == 0)
                        elm.parent().append("<span style='border:solid 3px #FE2E2E'>Min is " + scope.minlength + "</span>");
                }else
                    elm.parent().find("span").remove();
            });
        }
    };
});

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<form name="myForm" novalidate ng-app="myApp">
  <ul ng-controller="Fiddle">
    <li>
      <label for="barthirty">Min 3 Char:</label>
      <input input-data type="datetime" ng-model="nmTest" minlength="3"/>

    </li>
  </ul>
</form>

AngularJS验证指令消息参数

1 个答案: