ng-pattern不使用angular ui datepicker

Question

我想使用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]|1\d|2\d|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-pattern应用于普通输入字段(无日期选择器),它将按预期工作.

似乎存在冲突,但我不确定它是什么.有任何想法吗？

更新:

这是一个简单的plunker来说明所要求的问题.经过一些进一步的挖掘后,似乎确实在对底层Date对象运行模式.但是,当我使用格式化日期的自定义指令时,它会根据实际输入运行它.

我看到NG模式的唯一文档是一个简单提一下这里下输入.还有什么我可能不知道的吗？

Answer 1

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

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

遵循这些项目符号是一个指令,将完成您想要的功能.在向您展示代码之前,我想解释指令中的逻辑:

• 为了添加你自己的$ parser,你必须ngModel在你的指令定义中添加一个require,以便你可以访问ngModelController
• 因为RegExp期望模式参数没有开始和尾部斜杠,所以我在模式指令参数中删除了它们
• datepicker将模型值从a更改String为a Date.由于datepicker用于unshift将它的$ parser函数添加到$parsers数组的开头,我们还需要使用unshift$ parser放在$ parser之前datepicker.
• 正如您所提到的,该datepicker指令将采用它可以解析为日期的任何值并将其用于模型.为了确保只使用与模式匹配的日期,我将返回undefined(如文档中所指定)与模式不匹配的日期.我没有对作为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]|1\d|2\d|3[01])\/(19|20)\d{2}$"

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

那么为什么还没有ng-pattern工作呢？

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