指示が入力変更で呼び出されない

Question

私は解決できないような問題に直面しています。 このように、私は、入力値を検証するため、各ディレクティブで複数の入力を持つ：

<div class="row form-group"> 
     <div class="col-sm-6">last name</div> 
     <div class="col-sm-6"> 
      <div class="input-group" ng-class="{'has-error': form.lastname.$invalid && (form.lastname.$touched || form.$submitted)}"> 
       <input type="text" name="lastname" class="form-control" 
         model-blur 
         validator-lastname 
         ng-trim="true" 
         ng-model="fields.lastname.value" 
         ng-maxlength="fields.lastname.validation.maxLength"> 
       <input-group-addon class="input-group-addon" 
             iga-char="" 
             iga-form="form" 
             iga-field="form.lastname" 
             iga-if-touched="true"> 
       </input-group-addon> 
      </div> 

      <form-message-list fml-form="form" 
            fml-field="form.lastname" 
            fml-label="Last name" 
            fml-fieldData="fields.lastname"> 
      </form-message-list> 
     </div> 
    </div> 

このフィールドには、次のパターンを必要と：私は無効な値を追加すると ：/^[\'a-zA-Z_]+([\'a-zA-Z_]+)*$/

私の問題はこれです/：私の無効なメッセージは残っていて、ng-invalid-patternは自分のフィールドに残っています。

私のフィールドにこのパターンを追加すると、ng-pattern="/^[\'a-zA-Z_]+([\'a-zA-Z_]+)*$/"私は何の問題もありません。しかし、私の指示でバリデーターラストネームで検証しようとすると、1回だけチェックされます。入力値に無効な値を入力してから空に変更すると、ng-invalid-patternエラーが残ります。

これは私のディレクティブです：

angular.module('app') 
    .directive('validatorLastname', validatorLastname); 

/* @ngInject */ 
function validatorLastname() { 

    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(/^[\'a-zA-Z_]+([\'a-zA-Z_]+)*$/); 
       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]); 
     } 
    } 
} 

私は、問題を再現するためにJSFiddleをした：http://jsfiddle.net/sZZEt/537/

私は、誰かが正しい方向に私を指すことができると思います。 ありがとうございます。

Answer 1

すべてがうまく動作するように、ディレクティブコードを更新する必要があります。

angular.module('app') 
.directive('validatorLastname', validatorLastname); 

/* @ngInject */ 
function validatorLastname() { 

    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(/^[\'a-zA-Z_]+([\'a-zA-Z_]+)*$/); 
       if (res && res.length > 0) { 
        valid = true; 
       } 

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

私はあなたの問題のためplunk ... inputValueではnullの場合、あなたの$ setValidityメソッドが呼び出されず、再検証を行うことができなかったので、それがある を作成しました。パターンの妥当性をelse部分の中でtrueに設定する必要があります。入力がない場合にフィールドを有効にしたい場合。 更新されたplunkを参照できるようにしましたhttps://plnkr.co/edit/N3DrsB?p=preview