AngularJS ui-Maske mit ng-Muster

Question

Code unten funktioniert nicht ..

<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]$/" 
/> 

wenn Eingangswert 20:00:00 ist, dann formName.hhmmss.$error.pattern ist true.

wenn ui-mask entfernen:

<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]$/" 
    /> 

wenn Eingangswert 20:00:00 ist, dann ist formName.hhmmss.$error.patternfalse. Wie kann ich Regex in ng-pattern verwenden?

Answer 1

Ich hatte das gleiche Problem und änderte die Datei mask.js, um den Wert des Bereichs auf Tastendruck zu aktualisieren. Es gibt eine Codezeile, die das tut, aber nicht die ganze Zeit ausgeführt wird.

controller.$setViewValue(valUnmasked); 

Aktualisieren Sie die if-Anweisung auf die folgenden:

if (valAltered || iAttrs.ngPattern) { 

Das "scope.apply" auf Tastendruck ausgeführt werden soll und das Modell aktualisieren.

Answer 2

Angular 1.3.19 Verhalten von ng-pattern geändert, die UI-Maske bricht.

Derzeit validiert die ng-Muster-Direktive $viewValue anstelle von $modelValue - Reference in changelog.

Angular-Team lieferte benutzerdefinierte Anweisung, die das vorherige Verhalten zurücknimmt. Es ist eine gute Problemumgehung für dieses Problem.

Sie müssen das Feld pattern-model Feldern hinzufügen, wenn Sie sowohl ui-mask als auch ng-pattern verwenden.

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

-Code der Richtlinie (fügen Sie es Ihrer Code-Basis):

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

Ausgabe in ui-Maske GitHub - Reference.