Giriş değişikliği için çağrılmayan yönerge

Question

Çözemediğim bir sorunla karşılaşıyorum. Böyle, giriş değeri doğrulamak için her bir direktif ile çeşitli girişler vardır: /^[\'a-zA-Z_]+([\'a-zA-Z_]+)*$/

Sorunum şudur:

<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> 

Bu alan aşağıdaki desen gerekli Ben geçersiz bir değer eklediğinizde Benim girişime, böyle: /, geçersiz mesaj kalır ve ng-invalid-pattern alanımda kalır.

Bu desen şu şekilde benim alanıma eklediğimde: ng-pattern="/^[\'a-zA-Z_]+([\'a-zA-Z_]+)*$/" Herhangi bir sorunum yok. Ancak, validator-lastname numaralı yönergemle doğrulamayı denediğimde, yalnızca bir kez denetler. Girişi geçersiz bir değerle doldurduğumda ve sonra boş olarak değiştirdiğimde izin verilir, ng-invalid-pattern hatası kalır. http://jsfiddle.net/sZZEt/537/

Birinin bana doğru yönde işaret edebilir umut:

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

Bir JSFiddle sorunu yeniden yapılan:

Bu

benim direktifi olduğunu. Şimdiden teşekkürler.

Answer 1

Her şeyin iyi çalışması için yönerge kodunuzu güncelleştirmelisiniz.

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

Ben senin sorunu için plunk ... Giriş Değeri null ise o zaman $ setValidity yöntemi çağırmak olmayacak ve tekrar doğrulama gerçekleştirmek olamazdı çünkü öyle oluşturduk. Kalıp geçerliliğini, diğer iç kısımda doğru olarak ayarlamanız gerekir. giriş yapmak için alanı geçerli yapmak istiyorsanız. Artık güncelleştirilmiş pili inceleyebilirsiniz https://plnkr.co/edit/N3DrsB?p=preview