Angularjs ui-maschera ng-pattern

Question

sotto codice non funziona ..

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

quando il valore di ingresso è 20:00:00, quindi formName.hhmmss.$error.pattern è true.

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

quando il valore di ingresso è 20:00:00, quindi formName.hhmmss.$error.pattern è false.

Come utilizzare la regex in ng-pattern?

Answer 1

Ho avuto lo stesso problema e ho modificato il file mask.js per aggiornare il valore dell'ambito su Keypress. Esiste una riga di codice che esegue questa operazione ma non viene eseguita continuamente.

controller.$setViewValue(valUnmasked); 

Aggiornare l'istruzione if al seguente:

if (valAltered || iAttrs.ngPattern) { 

che verrà eseguito "scope.apply" sulla pressione dei tasti e aggiornare il modello.

Answer 2

Angolare 1.3.19 comportamento modificato di ng-pattern che interrompe la maschera.

Attualmente la direttiva ng-pattern convalida $viewValue anziché $modelValue - Reference in changelog.

Il team angolare ha fornito una direttiva personalizzata che ripristina il comportamento precedente. È buona soluzione per questo problema.

È necessario aggiungere l'attributo pattern-model ai campi quando si utilizzano sia ui-mask e 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 
/> 

Codice della direttiva (aggiungerlo al tuo codebase):

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

Problema in ui-maschera GitHub - Reference.