Angularjs UI-маска с нг-шаблон

Question

ниже код не работает ..

<input type="text" 
     class="form-control input-sm" 
     placeholder="hh:mm:ss" 
     name="hhmmss" 
     ng-model="data.hhmmss" 
     ui-mask="99:99:99" 
     ng-pattern="/^([0-2]|0[0-9]|1[0-9]|2[0-3]):?[0-5][0-9]:?[0-5][0-9]$/" 
/> 

, когда входное значение 20:00:00, то это formName.hhmmss.$error.patterntrue.

, если удалить ui-mask:

<input type="text" 
     class="form-control input-sm" 
     placeholder="hh:mm:ss" 
     name="hhmmss" 
     ng-model="data.hhmmss" 
     ng-pattern="/^([0-2]|0[0-9]|1[0-9]|2[0-3]):?[0-5][0-9]:?[0-5][0-9]$/" 
    /> 

, когда входное значение 20:00:00, то это formName.hhmmss.$error.patternfalse.

Как использовать регулярное выражение в ng-pattern?

Answer 1

У меня была такая же проблема и был изменен файл mask.js, чтобы обновить значение области на клавиатуре. Существует строка кода, которая делает это, но не выполняется все время.

controller.$setViewValue(valUnmasked); 

Update, если заявление на следующее:

if (valAltered || iAttrs.ngPattern) { 

Это будет работать "scope.apply" при нажатии клавиш и обновления модели.

Answer 2

Угловое 1.3.19 изменило поведение ng-pattern, что нарушает ui-mask.

В настоящее время директива ng-pattern проверяет $viewValue вместо $modelValue - Reference in changelog.

Угловая команда предоставила пользовательскую директиву, которая возвращает предыдущее поведение. Это хорошая проблема для решения этой проблемы.

При использовании ui-mask и ng-pattern вы должны добавить атрибут pattern-model.

<input type="text" 
     class="form-control input-sm" 
     placeholder="hh:mm:ss" 
     name="hhmmss" 
     ng-model="data.hhmmss" 
     ng-pattern="/^([0-2]|0[0-9]|1[0-9]|2[0-3]):?[0-5][0-9]:?[0-5][0-9]$/" 
     ui-mask="99:99:99" 
     pattern-model 
/> 

Код директивы (добавьте его в кодовую):

.directive('patternModel', function patternModelOverwriteDirective() { 
    return { 
    restrict: 'A', 
    require: '?ngModel', 
    priority: 1, 
    compile: function() { 
     var regexp, patternExp; 

     return { 
     pre: function(scope, elm, attr, ctrl) { 
      if (!ctrl) return; 

      attr.$observe('pattern', function(regex) { 
      /** 
      * The built-in directive will call our overwritten validator 
      * (see below). We just need to update the regex. 
      * The preLink fn guarantees our observer is called first. 
      */ 
      if (angular.isString(regex) && regex.length > 0) { 
       regex = new RegExp('^' + regex + '$'); 
      } 

      if (regex && !regex.test) { 
       //The built-in validator will throw at this point 
       return; 
      } 

      regexp = regex || undefined; 
      }); 

     }, 
     post: function(scope, elm, attr, ctrl) { 
      if (!ctrl) return; 

      regexp, patternExp = attr.ngPattern || attr.pattern; 

      //The postLink fn guarantees we overwrite the built-in pattern validator 
      ctrl.$validators.pattern = function(value) { 
      return ctrl.$isEmpty(value) || 
       angular.isUndefined(regexp) || 
       regexp.test(value); 
      }; 
     } 
     }; 
    } 
    }; 
}); 

Проблема в UI-маски GitHub - Reference.