AngularJSは指令による申告時に再確認します

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

今私の問題はこれです：

私は入力に記入し、すべてが、しかし、罰金のときI無効な値で入力を埋めると、この場合はモーダルを再び開くと無効なパターンが存在しなくなり、ユーザーは無効な入力値を続けることができます。

送信時に入力値を確認するにはどうすればよいですか？

ありがとうございます。

Answer 1

あなたはNGパターンに

サンプル・コードを使用して同じ機能を実現することができます - 私は私の指示ビットを変更することで、私の問題を解決し

<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

。私は、今後の参考のために私のディレクティブを投稿します：正しい方向に私を指摘Fantaramaへ

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

感謝を。パーサーを使用する代わりに、私はバリデーターを使用します。