Question

我有一个简单的指令＆＃39;包装＆＃39;用于引导日期选择器小部件。

module.exports = function () {
return {
  restrict: 'E',
  scope: {
    dateModel: '=',
    srText: '@',
    minDate: '=',
    maxDate: '=',
    fieldName: '@',
    formError: '=',
    fieldError: '=',
    inputRequired: '=',
    validPattern: '='
  },
  replace:true,
  template:
  ['<div class="pk-lp-calendar">',
      '<input type="text"',
          'name="{{fieldName}}"',
          'id="{{fieldName}}"',
          'remove-default-formatter',
          'class="form-control"',
          'datepicker-popup="MMM-yyyy"',
          'datepicker-options="dateOptions"',
          'datepicker-mode="\'year\'"',
          'min-mode="\'month\'"',
          'ng-model="dateModel"',
          'is-open="opened"',
          'min-date="minDate"',
          'max-date="maxDate"',
          'show-button-bar="false"',
          'close-text="Close"',
          'ng-required="inputRequired"',
          'ng-pattern="validPattern"',
          'ng-class="{\'invalidField\' : formError && fieldError}" />',
      '<a href=""',
      'class="gb-calendarIcon" ng-click="open($event)">',
      '<span class="sr-only" ng-bind="srText"></span>',
    '</a>',
  '</div>'].join(' '),
  controller:['$scope', function($scope){

    $scope.date = $scope.dateModel;

    $scope.open = function($event) {

      console.log($scope.formError + ' : ' + $scope.fieldError);

      $event.preventDefault();
      $event.stopPropagation();

      $scope.opened = !$scope.opened;
    };

    $scope.dateOptions = {
      formatYear: 'yyyy',
      startingDay: 1,
      minMode: 'month',
      datepickerMode: 'year'
    };

  }]
};

};

如果用户键入日期而不是使用datepicker弹出窗口，则需要验证模板中的文本输入字段。它是必需的，必须采用mmm-yyyy格式。我将ng-pattern和ng-required传递给指令的隔离范围（inputRequired和validPattern）。 html看起来像：

<lp-monthpicker date-model="goalModel.startDate" min-date="minimumStartDate"
                    form-error="goalModel.formError" field-name="startDateInput"
                    field-error="lpBuildGoalForm.startDateInput.$invalid"
                    input-required="true"
                    valid-pattern="goalModel.dateMatch">
    </lp-monthpicker>
      <div class="pk-lp-validationError" ng-show="goalModel.formError && lpBuildGoalForm.startDateInput.$invalid">Please complete goal form</div>

正则表达式是：

goalModel.dateMatch =
  /^(jan|Jan|JAN|feb|Feb|FEB|mar|Mar|MAR|apr|Apr|APR|may|May|MAY|jun|Jun|JUN|jul|Jul|JUL|aug|Aug|AUG|sep|Sep|SEP|oct|Oct|OCT|nov|Nov|NOV|dec|Dec|DEC)-(20\d\d)$/;

在浏览器中为输入字段呈现的节点显示代码正在运行 - 这是来自chrome的呈现节点：

<input type="text" name="startDateInput" id="startDateInput" remove-default-formatter="" 
   class="form-control ng-isolate-scope ng-valid-date ng-valid-required ng-invalid ng-invalid-pattern ng-dirty ng-valid-parse ng-touched" 
   datepicker-popup="MMM-yyyy" datepicker-options="dateOptions" datepicker-mode="'year'" min-mode="'month'" ng-model="dateModel" is-open="opened" 
   min-date="minDate" max-date="maxDate" show-button-bar="false" close-text="Close" 
   ng-required="inputRequired" 
   ng-pattern="/^(jan|Jan|JAN|feb|Feb|FEB|mar|Mar|MAR|apr|Apr|APR|may|May|MAY|jun|Jun|JUN|jul|Jul|JUL|aug|Aug|AUG|sep|Sep|SEP|oct|Oct|OCT|nov|Nov|NOV|dec|Dec|DEC)-(20\d\d)$/" 
   ng-class="{'invalidField' : formError &amp;&amp; fieldError}" 
   required="required">

datepicker的双向绑定的默认值是＆＃34; Apr-2020＆＃34;。我得到了无效模式＆＃39;马上用默认的蝙蝠。如果我删除字段中的文本，它将更改为ng-valid-pattern（奇怪）。我已经在3种不同的在线测试工具中测试了我的正则表达式，看起来很不错。我需要的工作，ng-model工作，ng-class按预期工作。我是否有一些角色的怪癖？我使用另一个ng-pattern来验证货币字段，它工作正常，但不在隔离范围内。这可能是问题吗？任何帮助将不胜感激！

由于

ng-pattern似乎在使用隔离范围的指令内工作

0 个答案: