AngularJS revalidate beim Einreichen über die Direktive

Question

Ich stehe vor einem Problem, das ich nicht lösen kann. Ich habe ein Feld, das ich über eine Direktive validiere, die den Eingabewert mit einer Regex übereinstimmt.

Mein Eingang:

<input type="text" 
     name="emailaddress" 
     class="form-control" 
     ng-model="fields.emailaddress.value" 
     ng-maxlength="fields.emailaddress.validation.maxLength" 
     validator-emailaddress 
     required /> 

Meine Richtlinie:

angular.module('forms') 
    .directive('validatorEmailaddress', validatorEmailaddress); 

/* @ngInject */ 
function validatorEmailaddress() { 

    var directive = { 
     require: 'ngModel', 
     link: link 
    }; 

    return directive; 

    function link(scope, element, attrs, modelCtrl) { 

     var valid = false; 

     var formatter = function (inputValue) { 
      if (inputValue) { 
       var res = inputValue.match(/^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/); 
       if (res && res.length > 0) { 
        valid = true; 
       } 

       modelCtrl.$setValidity('pattern', valid); 
       valid = false; 
      } 
      return inputValue; 
     }; 
     modelCtrl.$parsers.push(formatter); 
     if (scope[attrs.ngModel] && scope[attrs.ngModel] !== '') { 
      formatter(scope[attrs.ngModel]); 
     } 
    } 
} 

Jetzt ist meine Frage dieser:

Wenn ich in der Eingabe füllen, alles ist in Ordnung, aber wenn ich fülle die Eingabe mit einem ungültigen Wert und öffne dann das Modal erneut. In diesem Fall ist das ungültige Muster nicht mehr vorhanden, so dass der Benutzer mit einem ungültigen Eingabewert fortfahren kann.

Wie kann ich veranlassen, dass meine Anweisung den Eingabewert auch beim Senden überprüft?

Vielen Dank im Voraus.

Answer 1

Sie können gleiche Funktionalität mit ng-Muster erreichen

Beispielcode -

<div> 
 
    <input type="text" ng-model="fields.email" name="email" ng-required="true" ng-pattern="/^[a-zA-Z0-9]+[a-zA-Z0-9._+-]+@[a-zA-Z0-9._+-]+\.[a-zA-Z0-9.]{2,10}$/"> 
 
    <div ng-messages="formname.email.$error"> 
 
      <div ng-message="required" class="form-error"> *Email is required. </div> 
 
      <div ng-message="pattern" class="form-error"> *Email address is invalid </div> 
 
    </div> 
 
</div>

Answer 2

ich mein Problem gelöst durch meine Richtlinie etwas zu ändern. Ich poste meine Richtlinie für zukünftige Referenz:

Dank Fantarama, die mich in die richtige Richtung wies. Anstatt einen Parser zu benutzen, benutze ich jetzt einen Validator.