Question

我正在创建一个封装标签的输入指令，以及一些错误消息，但是我遇到了ng-minlength和ng-maxlength。问题是他们不会填充模型值，直到它成为有效值，因此我的父作用域可以在我的指令不显示时显示值，反之亦然。查看此plunk以获取我的意思。

唯一的方法是定义我自己的minlength和maxlength验证器吗？是否有某种方法配置此行为，以便始终填充模型？我想在我的指令中使用所有内置的验证器，所以毫无疑问，这将是所有这些问题的一个问题，而我宁愿不重新定义它们。

HTML：

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="app" ng-controller="Controller"> 
    <label>Outer scope 1</label>
    <input name="input1" type="text" ng-model="model1" ng-minlength="4"/>
    <br/>
    <label>Directive scope 1</label>
    <input-dir ng-model="model1" ng-minlength="0"></input-dir>
    <br/>
    <br/>
    <br/>

    <label>Outer scope 2</label>
    <input name="input3" type="text" ng-model="model2"/>
    <br/>
    <label>Directive scope 2</label>
    <input-dir ng-model="model2" ng-minlength="4"></input-dir>


  </body>

</html>

使用Javascript：

var app = angular.module('app', []);

app.controller('Controller', function($scope){
  $scope.model1 = "Model1";
  $scope.model2 = "Model2";
});

app.directive('inputDir', function(){
  return {
    restrict: 'E',
    template: '<input type="text" ng-model="model" ng-minlength="{{ minlength }}" />',
    scope: {
      model: '=ngModel',
      minlength: '=ngMinlength'
    }
  };
});

Answer 1

对于有同样问题的其他人，我通过重新定义所有验证器来解决这个问题，除非现在它们在无效时返回值，因此填充了模型。只需包含valuedValidators模块即可。这些验证器在$ error对象上可用作vvminlength等。

<强> VV-validators.js

(function () {
    'use strict';

    var validators = {};
    validators.vvUrl = function(value){
        var urlRegex = new RegExp(/[-a-zA-Z0-9@:%_\+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9@:%_\+.~#?&//=]*)?/gi);
        return urlRegex.test(value);
    }

    validators.vvEmail = function(value){
        var emailRegex = new RegExp(/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/);
        return emailRegex.test(value);
    }

    validators.vvMinlength = function(value, min){
        var huh = value.length >= parseInt(min);
        return min && value && huh;
    }

    validators.vvMaxlength = function(value, max){
        return max && value && value.length <= parseInt(max);
    }

    validators.vvMin = function (value, min) {
        return min && parseFloat(value) >= parseFloat(min);
    }

    validators.vvMax = function (value, max) {
        return max && parseFloat(value) <= parseFloat(max);
    }

    validators.vvPattern = function (value, pattern) {
        return pattern && new RegExp(pattern).test(value);
    }

    validators.vvFloat = function (value) {
        var floatRegex = new RegExp(/^\-?\d+((\.|\,)\d+)?$/);
        return floatRegex.test(value);
    }

    validators.vvInteger = function (value) {
        var integerRegex = new RegExp(/^\-?\d+$/);
        return integerRegex.test(value);
    }

    var app = angular.module('valuedValidators', []);

    var names = Object.keys(validators);
    names.forEach(function(name){
        app.directive(name, function(){
            return {
                restrict: 'A',
                require: 'ngModel',
                link: function (scope, element, attrs, controller) {
                    controller.$parsers.unshift(function (viewValue) {
                        var valid = true;
                        var attrValue = attrs[name];
                        var func = validators[name];
                        if (attrValue !== 'false') {
                            valid = func(viewValue, attrValue);
                            controller.$setValidity(name.toLowerCase(), valid);
                        }
                        return viewValue;
                    });
                }
            };
        });
    });
}());

Answer 2

还有一个更简单的解决方案：使用两个文本区域。

第一个用作草稿，第二个是进行验证的模型。

parentFragmentManager

当用户编写第一个模型时，它将自动填充正确的模型（第二个模型）。

指令中的ng-minlength在无效时未填充

2 个答案: