anglejs – ng模式不能与角ui datepicker工作

发布时间：2020-12-17 09:17:10 所属栏目：安全来源：网络整理

导读：我想使用ng-pattern来进一步强制使用Angular UI datepicker输入字段中的日期格式.问题是当我这样做时总是显示无效. p class="input-group" input type="text" datepicker-popup="MM/dd/yyyy" is-open="opened" close-text="Close" ng-model="someDate" class

我想使用ng-pattern来进一步强制使用Angular UI datepicker输入字段中的日期格式.问题是当我这样做时总是显示无效.

<p class="input-group">
    <input type="text" datepicker-popup="MM/dd/yyyy" is-open="opened" close-text="Close"
        ng-model="someDate" class="form-control" placeholder="mm/dd/yyyy"
        ng-pattern="/^(0[1-9]|1[0-2])/(0[1-9]|1d|2d|3[01])/(19|20)d{2}$/" required />
    <span class="input-group-btn">
        <button type="button" class="btn btn-default" ng-click="open($event)">
            <i class="glyphicon glyphicon-calendar"></i>
        </button>
    </span>
</p>

如果我将相同的ng模式应用于普通输入字段(无日期戳),则可以按预期方式工作.

似乎有一个冲突,但我不知道是什么.有任何想法吗？

更新：

Here是一个简单的空间,可根据要求说明问题.在进一步挖掘之后,它似乎正在对基础的Date对象运行模式.当我使用格式化日期的自定义指令时,它会根据实际输入运行它.

我所看到的ng-pattern的唯一文档是输入下简短的here.还有什么可能我失踪了吗？

正如我在评论中提到的那样,发生的是datepicker指令将模型值从String更改为Date对象.当ngPattern尝试验证Date对象时,它将失败,因为Date的字符串值不会与您正在使用的模式相匹配.

您可以做的是创建自己的指令,钩入$parsers of the ngModelController运行您的模式检查,然后根据该值调用$setValidity(). $解析器实际上是为这种类型的功能构建的,您希望在ngModel值上运行自己的自定义验证.

遵循这些项目符号是一个将完成所需功能的指令.在我向你显示代码之前,我要解释指令中的逻辑：

>为了添加您自己的$解析器,您必须在指令定义中添加ngModel的要求,以便您可以访问ngModelController
>因为RegExp期望模式参数没有开始和尾部斜杠,我在pattern指令参数中删除它们
> datepicker将模型值从String更改为Date.因为datepicker使用unshift将$parser函数添加到$parsers数组的开头,所以我们还需要使用unshift将我们的$parser放在datepicker的$parser之前.
>如前所述,datepicker指令将采用任何可以解析为日期的值,并将其用于模型.为了确保仅使用与模式匹配的日期,我将返回未定义(如文档中指定的)与模式不匹配的日期.我没有这样检查作为Date对象的值,因为这意味着它是使用datepicker小部件选择的.
>正如我刚刚提到的,在以前的项目符号中,我没有进行有效性检查,如果该值已经是一个Date对象,因为这意味着它是使用datepicker小部件选择,这意味着它是一个有效的日期.

指令码

app.directive('awDatepickerPattern',function() {
  return {
    restrict: 'A',require: 'ngModel',link: function(scope,elem,attrs,ngModelCtrl) {
      var dRegex = new RegExp(attrs.awDatepickerPattern);

      ngModelCtrl.$parsers.unshift(function(value) {

        if (typeof value === 'string') {
          var isValid = dRegex.test(value);
          ngModelCtrl.$setValidity('date',isValid);
          if (!isValid) {
            return undefined;
          }
        }

        return value;
      });

    }
  };
});

html – 确保您不要忘记删除正则表达式定义中的开始和尾部斜杠：

aw-datepicker-pattern="^(0[1-9]|1[0-2])/(0[1-9]|1d|2d|3[01])/(19|20)d{2}$"

这是一个更新的plunker与我的代码.

那么为什么再次没有ng模式工作？

如果您没有注意到为什么ng-pattern在与datepicker指令一起使用时不起作用的根本原因是因为datepicker指令通过使用unshift将其自己的ngModelController $parser添加到$parsers数组的开头,哪些更改从String到Date的模型值.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!