AngularJS 自定义出生日期输入不显示所需的错误-6ren

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

转载作者：太空宇宙更新时间：2023-11-04 13:07:11

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

代码

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;
                });
            }
        };
    }]);

<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>

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

更新:在较低版本的 AngularJS 上，它工作得很好，就像我想要的那样，但是在 AngularJS 1.5.8 上，我运气不好。 :(

请帮我解决这个问题。

编码愉快!

最佳答案

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

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;
                });
            }
        };
    }]);

<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>

关于AngularJS 自定义出生日期输入不显示所需的错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39410981/

文章推荐： c++ - Ncurses c/c++ - getstr() 未声明的 char 数组

文章推荐： html - 强制移动浏览器以其原始分辨率显示网页

文章推荐： java - 在 JMH 应用程序中使用 Spring Bean

java - 所需 bundle 的状态已解决而不是 Activity
我有一个依赖于包 B 的包 A。当包 A 中的代码运行并访问包 B 中的类时，包 B 的状态将被解析 (4)，而不是 Activity (32) 和包 B 的激活器也没跑好。我认为 bundle B
html - 所需 CSS 中的像素宽度比我预期的长 10px。为什么？
这个问题在这里已经有了答案: How to remove the space between inline/inline-block elements? (41 个回答) 关闭 7 年前。
java - native 库，Java OpenAL 所需
我正在尝试使用 Java OpenAL 库。我在导入名为 libsoft_oal.so 的 native 库时遇到问题。 Java OpenAL 依赖于 OpenAL 软实现。我尝试根据他们在 git
ruby - 所需 ruby 文件的 Sidekiq 错误
我正在尝试启动我的应用程序。是一个 unicorn +工头+sinatra的应用。这是我的 config.ru 文件: require "rubygems" require "sinatra" Bu
javascript - 仅获取所有选项中间值，使用 jquery 选择(所需)类
我有一个下拉列表，其中包含一些从数据库表中检索的值，我想要的是当单击按钮时它应该只获得选项标签的中间值，但只有那些类名为“get_this”的选项标签并离开那些选项，如果他们没有这个类预期输出:值
php - 所需 php 中的 Javascript 文件不起作用，但直接在文件中可以
我有一个index.php文件，需要一个通用的head.php文件，head.php文件中有几个Javascript文件，当这样尝试时，代码在源代码中看起来很好，但文件却不是实际上对文档做任何事情。
android insmod init_module 失败(所需 key 不可用)
有人能帮帮我吗？我已经像这样运行了 imsmod: $ insmod /data/mm/mmdev.ko epoll_rate=100 但是我得到一个错误: insmod: init_module
php - 在 Notepad++ 中打开 PHP 所需/包含文件的快速方法
是否有键盘快捷键或插件可以在 Notepad++ 中打开 PHP 所需或包含的文件？我知道，在 Dreamweaver 中，执行此操作的命令是 Ctrl+D，但我似乎无法在 Notepad++ 中找到
javascript - 显示/隐藏点击 div，所需 : one item displayed at a time
我已经用 js 设置了一个显示/隐藏 div，但我很难弄清楚如何一次显示一个 div。目前发生的情况是，除非我再次单击原始链接来关闭该 div，否则每个 div 都会显示。 http://www.li
elasticsearch - 属性:[机架]上的节点上的碎片太多，每个属性:[1]所需，节点数:[2]，剩余的:[0]
当我尝试将未分配的辅助分片分配给节点时出现错误。 { "error": { "root_cause": [ { "type": "remote_transpor
c++ -/usr/bin/ld : warning: abc. 所以，找不到 xyz.so 所需(尝试使用 -rpath 或 -rpath-link)”
我正在构建一个 C++ 应用程序，使用 Netbeans 6.9 作为我的 IDE。我有一个 C++ 库，它是一个纯 C 库的包装器。我已将文件正确添加到项目中(使用添加库文件选项)。这是 g++

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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