0

I've got a simple directive 'wrapper' for a bootstrap datepicker widget.

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'
    };

  }]
};

};

The text input field that is in the template needs to be validated if the user types the date rather than using the datepicker popup. It is required and has to be in the format mmm-yyyy. I'm passing in ng-pattern and ng-required to the directive's isolate scope (inputRequired and validPattern). The html looks like:

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

The regexp is:

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)$/;

The node that gets rendered in the browser for the input field shows that the code is working - this is the rendered node from 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">

the default value from the 2 way binding for the datepicker is "Apr-2020". I get 'ng-invalid-pattern' right off the bat with the default. If I delete the text in the field it changes to ng-valid-pattern (weird). I've tested my regexp in 3 different online testing tools and it appears to be good. My ng-required works, ng-model works, ng-class works as expected. Is there some quirk with angular that I'm missing? I'm using another ng-pattern to validate a currency field and it works fine, but isn;t inside an isolate scope. Could that be the problem? Any help would be appreciated!

Thanks

Chris
  • 63
  • 1
  • 1
  • 8
  • I'm wondering if your problem is caused by 'ng-model="dateModel"' as in your controller you are assigning dateModel to scope.date. So, shouldn't ng-model="date" ? – Leo Farmer May 20 '15 at 02:51
  • Have a look at this: http://stackoverflow.com/questions/11896732/can-i-use-ng-model-with-isolated-scope which has some good answers around adding the model to an isolated scope directive. – Leo Farmer May 20 '15 at 03:00
  • thanks Leo. the model is working it doesn't seem to match with the model as date or dateModel. The ng-pattern won't match the regex even though the regex is good. – Chris May 20 '15 at 13:24
  • Looks like its a problem with isolate scope. the only solution I could find was to take it out of the directive wrapper. – Chris May 20 '15 at 20:44

0 Answers0