Question

我正在创建一个指令来验证用户的年龄，我正在将它与ui-mask结合使用。我输入的html是这样的：

<input id="dateOfBirth" name="dateOfBirth" type="text" class="form-control" ng-model="owner.dateOfBirth" placeholder="mm/dd/yyyy" required ui-mask="99/99/9999" minimum-age="18">

和指令（从stackoverflow上的blacklist指令示例中复制）：

angular.module('Pensco.AEW.Directives')
.directive('minimumAge', function (){
    return {
        require: 'ngModel',
        link: function(scope, elem, attr, ngModel) {
            var minimumAge = parseInt(attr.minimumAge, 10),
                minDate = new Date(),
                monthsToSubtract = 12 * minimumAge;

            // subtract the months from today
            minDate.setMonth(minDate.getMonth() - monthsToSubtract);

            //For DOM -> model validation
            ngModel.$parsers.unshift(function(value) {
                var valid = isValid(value);

                ngModel.$setValidity('minimumAge', valid);

                return value;
            });

            //For model -> DOM validation
            ngModel.$formatters.unshift(function(value) {
                var valid = isValid(value);

                ngModel.$setValidity('minimumAge', valid);

                return value;
            });

            function cleanMask(value) {
                var parts;

                if (!value) { return; }

                parts = value.split('/');

                parts[0] = checkLength(parts[0], 2, 'm');
                parts[1] = checkLength(parts[1], 2, 'd');
                parts[2] = checkLength(parts[2], 4, 'y');

                return parts.join('/');
            }

            function checkLength(value, len, character) {
                if (value.length > len) {
                    value = value.slice(0, - 1);
                } else if (value.length < len) {
                    value = value + character;
                }

                return value;
            }

            function isValid(value) {
                var cleanedValue = cleanMask(value),
                    dob = new Date(cleanedValue);

                // if the date is valid then compare it to calculated min date
                if (isDate(dob)) {
                    return dob <= minDate;
                }

                return false;
            }

            function isDate(value) {
                return value instanceof Date && isFinite(value)
            }
        }
    };
});

问题在于，当用户键入数字（如0）时，值将设置为＆＃34; 0mm / dd / yyyy＆＃34;因为看起来ui-mask还没有删除占位符字符而使其成为＆＃34; 0m / dd / yyyy＆＃34;。 ui-mask的优先级设置为100，所以我将此指令的优先级设置为-1000，以为它可能在处理我的指令之前进行掩码完成处理。我的指令完成后，ui-mask看起来完成处理并删除占位符字符。

我添加了几种清理和验证日期的方法，但是，我必须相信有一种更清洁的方法来处理它。关于ui-mask处理后我的指令如何处理的任何想法都已完成处理？

Answer 1

我在你的代码中发现了一个问题。在checklength方法中抛出TypeError：无法读取未定义属性'length'

我已将代码更改为

function checkLength(value, len, character) {
            if(value!=undefined)
            {
            if (value.length > len) {
                value = value.slice(0, - 1);
            } else if (value.length < len) {
                value = value + character;
            }
            }

            return value;
        }

选中正常工作的Working Sample。

带有ui-mask的AngularJS指令

1 个答案: