UG-маска Angularjs с рисунком нг

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.pattern является true,

если удалить 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.pattern является false,

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

Answer 1

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

controller.$setViewValue(valUnmasked);

Обновите оператор if следующим образом:

if (valAltered || iAttrs.ngPattern) {

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

Answer 2

Угловой 1.3.19 изменил поведение ng-pattern это ломает маску UI.

В настоящее время директива ng-pattern проверяет $viewValue вместо $modelValue - Ссылка в журнале изменений.

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

Вы должны добавить pattern-model приписывать поля, когда вы используете оба ui-mask а также ng-pattern,

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

Проблема в маске пользовательского интерфейса GitHub - Справочник.