Question

我正在制作没有日历视图的输入元素的出生日期类型。即用户通过键入来填写日期。

代码

＆＃13;

angular.module('myApp', [])
.directive('birthDatePicker', [ function () {
        return {
            restrict: 'A',
            require: 'ngModel',
            scope: {
                model: '=ngModel',
            },
            link: function (scope, element, attrs, ngModel) {

                //SET CURSOR POSITION
                var setCursorPosition = function(pos) {
                    if (element[0].setSelectionRange) {
                        element[0].focus();
                        element[0].setSelectionRange(pos, pos);
                    } else if (element[0].createTextRange) {
                        var range = element[0].createTextRange();
                        range.collapse(true);
                        range.moveEnd('character', pos);
                        range.moveStart('character', pos);
                        range.select();
                    }
                };

                // RESET VALIDATION ERRORS
                var resetErrors = function() {
                    ngModel.$setValidity('pattern',true);
                };

                if (!ngModel) return;
                var d1, d2, m1, m2, y1, y2, y3, y4, cursorPos, dateString, parsedDate;
                ngModel.$parsers.unshift(function (inputValue) {
                    var digits = inputValue.split('').filter(function (s) { return (!isNaN(s) && s != ' '); });
                    d1 = digits[0] ? digits[0] : 'd';
                    d2 = digits[1] ? digits[1] : 'd';
                    m1 = digits[2] ? digits[2] : 'm';
                    m2 = digits[3] ? digits[3] : 'm';
                    y1 = digits[4] ? digits[4] : 'y';
                    y2 = digits[5] ? digits[5] : 'y';
                    y3 = digits[6] ? digits[6] : 'y';
                    y4 = digits[7] ? digits[7] : 'y';
                    dateString = d1+d2+'/'+m1+m2+'/'+y1+y2+y3+y4;

                    resetErrors();

                    if(dateString == 'dd/mm/yyyy') {
                        ngModel.$viewValue = '';
                        ngModel.$render();
                        return ngModel.$viewValue;
                    }

                    ngModel.$viewValue = dateString;
                    ngModel.$render();
                    cursorPos = digits.length + 2;
                    if(digits.length < 3) {
                        cursorPos = digits.length;
                    } else if (digits.length < 5) {
                        cursorPos = digits.length + 1;
                    }

                    setCursorPosition(cursorPos);

                    parsedDate = new Date(ngModel.$viewValue);

                    // validation for correct date
                    if(isNaN(parsedDate.getTime())){
                        ngModel.$setValidity('pattern',false);
                        return ngModel.$viewValue;
                    } else {
                        ngModel.$setValidity('pattern',true);
                    }

                    return ngModel.$viewValue;
                });
            }
        };
    }]);

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<body ng-app="myApp">
  <form name="myForm" novalidate>
  <input ng-model="date" name="question"
             placeholder="dd/mm/yyyy" birth-date-picker type="tel" autocomplete="off" required>
  <p ng-show="myForm.question.$error.required">Date is Required</p>
  <p ng-show="myForm.question.$error['pattern']">Date is incorrect</p>
  <input type="submit">
  </form>
</body>

＆＃13;

问题在于显示错误消息。仅在第一次显示消息Date is required并且按下提交按钮。当用户通过按backspace键清除输入值时，它不起作用。

更新在AngularJS的较低版本上，它正常工作，但是对于AngularJS 1.5.8，我运气不好。：（

请帮我解决这个问题。

快乐的编码！

Answer 1

根据https://docs.angularjs.org/api/ngMessages/directive/ngMessages上的文档和该页面上的示例，您应该如何使用ng-messages ...

＆＃13;

angular.module('myApp', [])
.directive('birthDatePicker', [ function () {
        return {
            restrict: 'A',
            require: 'ngModel',
            scope: {
                model: '=ngModel',
            },
            link: function (scope, element, attrs, ngModel) {

                //SET CURSOR POSITION
                var setCursorPosition = function(pos) {
                    if (element[0].setSelectionRange) {
                        element[0].focus();
                        element[0].setSelectionRange(pos, pos);
                    } else if (element[0].createTextRange) {
                        var range = element[0].createTextRange();
                        range.collapse(true);
                        range.moveEnd('character', pos);
                        range.moveStart('character', pos);
                        range.select();
                    }
                };

                // RESET VALIDATION ERRORS
                var resetErrors = function() {
                    ngModel.$setValidity('pattern',true);
                };

                if (!ngModel) return;
                var d1, d2, m1, m2, y1, y2, y3, y4, cursorPos, dateString, parsedDate;
                ngModel.$parsers.unshift(function (inputValue) {
                    var digits = inputValue.split('').filter(function (s) { return (!isNaN(s) && s != ' '); });
                    d1 = digits[0] ? digits[0] : 'd';
                    d2 = digits[1] ? digits[1] : 'd';
                    m1 = digits[2] ? digits[2] : 'm';
                    m2 = digits[3] ? digits[3] : 'm';
                    y1 = digits[4] ? digits[4] : 'y';
                    y2 = digits[5] ? digits[5] : 'y';
                    y3 = digits[6] ? digits[6] : 'y';
                    y4 = digits[7] ? digits[7] : 'y';
                    dateString = d1+d2+'/'+m1+m2+'/'+y1+y2+y3+y4;

                    resetErrors();

                    if(dateString == 'dd/mm/yyyy') {
                        ngModel.$viewValue = '';
                        ngModel.$render();
                        return ngModel.$viewValue;
                    }

                    ngModel.$viewValue = dateString;
                    ngModel.$render();
                    cursorPos = digits.length + 2;
                    if(digits.length < 3) {
                        cursorPos = digits.length;
                    } else if (digits.length < 5) {
                        cursorPos = digits.length + 1;
                    }

                    setCursorPosition(cursorPos);

                    parsedDate = new Date(ngModel.$viewValue);

                    // validation for correct date
                    if(isNaN(parsedDate.getTime())){
                        ngModel.$setValidity('pattern',false);
                        return ngModel.$viewValue;
                    } else {
                        ngModel.$setValidity('pattern',true);
                    }

                    return ngModel.$viewValue;
                });
            }
        };
    }]);

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<body ng-app="myApp">
  <form name="myForm" novalidate>
  <input ng-model="date" name="question"
             placeholder="dd/mm/yyyy" birth-date-picker type="tel" autocomplete="off" required>
<div ng-messages="myForm.question.$error" role="alert">
      <div ng-message="required">Date is Required</div>
      <div ng-message="pattern">Date is incorrect</div>
</div>
  <input type="submit">
  </form>
</body>

＆＃13;

Answer 2

你正在尝试包装ng-model的糟糕方法。试试Ben Nadel approach，它应该说明问题。

AngularJS自定义出生日期输入未显示必需的错误

2 个答案: