Warum bewirkt meine Winkelanweisung, dass unvollständige Werte gelöscht werden, wenn Sie in ein anderes Feld wechseln?

Question

Bei einem Projekt, an dem ich gerade arbeite, habe ich eine US-Telefonrichtlinie, die mir einige Probleme bereitet. Kurz gesagt: Wenn Sie einen unvollständigen Wert und eine Registerkarte in ein anderes Feld eingeben, geht der Wert verloren.

Ich habe a plunker of the problem in motion erstellt, und die Richtlinie säumige unter:

angular.module('app').directive('someInput', [ 
    '$filter', someInputDir 
]); 

function someInputDir($filter) { 
    return { 
    require: 'ngModel', 
    link: function (scope, element, attrs, ctrl) { 
     // Build mask. 
     var mask = '(999) 999-9999'; 
     if (attrs.useExtension) 
     mask += attrs.useExtension.toLowerCase() === 'true' ? '? x99999' : ''; 

     $(element).mask(mask); 

     var nonDigitCharacters = /[^0-9]/g; 

     // HACK: It turns out that angular and the jQuery Masked Input plugin 
     // don't play nicely together. In order for the masked input to work properly, 
     // we have to bind an event handler for key down events (since Masked Input 
     // blocks key down events) and force a change event to get the parsers to work 
     // properly. 
     element.on('keydown', function (evt) { 
     scope.$evalAsync(element.triggerHandler.bind(element, 'change', evt)); 
     }); 

     ctrl.$validators.minLength = function (modelValue) { 
     var minLength = 0; 
     if (attrs.minlength) 
      minLength = parseInt(attrs.minlength); 

     var stringValue = $filter('tel')(modelValue, false), 
      longEnough = stringValue.length >= minLength; 

     // If value not required, and nothing is entered, the value is valid. 
     if (!attrs.required && stringValue.length === 0) 
      return true; 

     // If value is required, and nothing is entered, this value is 'valid'. 
     // The point of this code is to not interfere with a required attribute! 
     if (attrs.required && stringValue.length === 0) 
      return true; 

     return longEnough; 
     }; 

     ctrl.$parsers.unshift(function(viewValue) { 
     var digitsOnly = viewValue.replace(nonDigitCharacters, '');     
     return digitsOnly; 
     }); 

     ctrl.$formatters.push(function (value) { 
     return $filter('tel')(value, false); 
     }); 
    } 
    }; 
} 

Zuerst dachte ich, es war der Brauch $validator, die ich schuf eine minlength Validierung (diese Implementierung zu simulieren bewirkt eine regelmäßige minlength zu nicht richtig funktionieren wegen der Maske.) Allerdings, in meinem Plunker, werden Sie sehen, dass ich eine Version ohne $validator gemacht habe, die genau das gleiche Problem hat.

Frage: Ich verstehe nicht, was ist mit dieser Anweisung verursacht einen unvollständigen Wert auf Unschärfe gelöscht werden. Auf welche Weise kann ich verhindern, dass der ungültige Wert gelöscht wird, aber zulassen, dass das Feld weiterhin als ungültig markiert wird?

Answer 1

Sieht aus wie Sie ein Problem mit JQuery maskedinput Plugin haben. Versuchen Änderung $(element).mask(mask);-$(element).mask(mask, {autoclear:false});

Hier ist Plunker mit Änderungen http://plnkr.co/edit/b1knRUgREox2Su8xdVIN