53995

Directive not called on input change

Question:

I'm facing an issue which I can't seem to solve. I have several inputs with each a directive to validate the input value, like this:

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

This field required the following pattern: /^[\'a-zA-Z_]+( [\'a-zA-Z_]+)*$/

My issue is this: <strong>When I add an invalid value to my input, like this: / , my invalid message remains and ng-invalid-pattern remains on my field.</strong>

When I add this pattern to my field like this: ng-pattern="/^[\'a-zA-Z_]+( [\'a-zA-Z_]+)*$/" I don't have any issues. But when I try to validate via my directive <strong>validator-lastname</strong> it only checks one time. When I fill the input with an invalid value and then change it to empty, which is allowed, the ng-invalid-pattern error remains.

This is my directive:

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

I made a JSFiddle to reproduce the problem: <a href="http://jsfiddle.net/sZZEt/537/" rel="nofollow">http://jsfiddle.net/sZZEt/537/</a>

I hope someone can point me in the right direction. Thanks in advance.

Answer1:

You should update your directive code to make everything work fine.

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

I have created a plunk for your problem... It is because if inputValue is null then your $setValidity method will not invoke and could not perform validation again. You should set pattern validity to true inside else part. if you want to make field valid for no-input. You can now refer to updated plunk <a href="https://plnkr.co/edit/N3DrsB?p=preview" rel="nofollow">https://plnkr.co/edit/N3DrsB?p=preview</a>

Recommend

  • Trigger FireFox extensions from a custom button
  • Chart is rendered in Chrome, but not in FF and IE
  • how to remove unused javascript functions, variables, and elements [closed]
  • Vee-Validate validateAll() with scope
  • Extending the Validator class in Laravel
  • Inheriting validation using ControlValueAccessor in Angular
  • com.iplanet.services.comm.client.SendRequestException: sun.security.validator.ValidatorException: PK
  • Login form issue with spring security 2.0.7 and spring 2.5
  • Spring Web Flow - Multiple forms on page - validating correct form
  • Is there a way to selectively skip silverlight field validation when using wcf ria?
  • How to get rid of “No jax-rs activator is defined for the project” warning?
  • Pass field name as parameter to custom validation method Rails 4
  • angular 2 group validation
  • How to mock springSecurityService in unit tests using grails
  • Spring bean validation messages resolution
  • Delphi. Analog of Memo/RichEdit
  • Excel 2007: Format of email address from Outlook 2007
  • Doctrine2 inverse persistance not working in nested forms
  • Updating and removing unique join relationships in CakePHP
  • Negating Regex PO BOX
  • jquery validation - waiting for remote check to complete
  • uml Composition relationships to RDF and OWL
  • NHibernate Validation Localization with S#arp Architecture
  • How can I send an e-mail from a vbs script
  • Retrieving value from sql ExecuteScalar()
  • Accessing IRQ description array within a module and displaying action names
  • AES padding and writing the ciphertext to a disk file
  • Convert array of 8 bytes to signed long in C++
  • Linker errors when using intrinsic function via function pointer
  • KeystoneJS: Relationships in Admin UI not updating
  • Hits per day in Google Big Query
  • Getting Messege Twice Using IMvxMessenger
  • LevelDB C iterator
  • Add sale price programmatically to product variations
  • Checking variable from a different class in C#
  • Busy indicator not showing up in wpf window [duplicate]
  • Why is Django giving me: 'first_name' is an invalid keyword argument for this function?
  • How can I use `wmic` in a Windows PE script?
  • Unable to use reactive element in my shiny app
  • How do I use LINQ to get all the Items that have a particular SubItem?