AngularJS revalidate on submit via директива

Question

У меня возникла проблема, которую я, похоже, не могу решить. У меня есть поле, которое я проверяю с помощью директивы, которая соответствует входному значению с помощью регулярного выражения.

Мой вход:

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

Моя директива:

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

Теперь мой вопрос заключается в следующем:

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

Как я могу настроить свою директиву на входное значение и на отправку?

Заранее спасибо.

Answer 1

Вы можете достичь такой же функциональности, используя нг профилированное

код образца -

<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

я решил мою проблему, изменив свою директиву немного. Я отправлю свою директиву для использования в будущем:

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; 
     }; 
     scope.$watch(attrs.ngModel, function (inputValue) { // This did the trick 
      formatter(inputValue); 
     }); 
    } 
} 

Благодаря Fantarama, который указал мне в правильном направлении. Вместо использования парсера я использую валидатор сейчас.