filters on ng-model in an input

by

I believe that the intention of AngularJS inputs and the ngModel direcive is that invalid input should never end up in the model. The model should always be valid. The problem with having invalid model is that we might have watchers that fire and take (inappropriate) actions based on invalid model.

As I see it, the proper solution here is to plug into the $parsers pipeline and make sure that invalid input doesn’t make it into the model. I’m not sure how did you try to approach things or what exactly didn’t work for you with $parsers but here is a simple directive that solves your problem (or at least my understanding of the problem):

app.directive('customValidation', function(){
   return {
     require: 'ngModel',
     link: function(scope, element, attrs, modelCtrl) {

       modelCtrl.$parsers.push(function (inputValue) {

         var transformedInput = inputValue.toLowerCase().replace(/ /g, ''); 

         if (transformedInput!=inputValue) {
           modelCtrl.$setViewValue(transformedInput);
           modelCtrl.$render();
         }         

         return transformedInput;         
       });
     }
   };
});

As soon as the above directive is declared it can be used like so:

<input ng-model="sth" ng-trim="false" custom-validation>

As in solution proposed by @Valentyn Shybanov we need to use the ng-trim directive if we want to disallow spaces at the beginning / end of the input.

The advantage of this approach is 2-fold:

  • Invalid value is not propagated to the model
  • Using a directive it is easy to add this custom validation to any input without duplicating watchers over and over again

More Related Contents:

  1. ng-model for “ (with directive DEMO)
  2. ng-repeat :filter by single field
  3. AngularJS: ng-model not binding to ng-checked for checkboxes
  4. Difficulty with ng-model, ng-repeat, and inputs
  5. AngularJS. When select have ng-model attribute, ng-selected not working
  6. Descending order by date filter in AngularJs
  7. Limit the length of a string with AngularJS
  8. Using AngularJS date filter with UTC date
  9. How to filter multiple values (OR operation) in angularJS with checkbox
  10. How to add custom validation to an AngularJS form?
  11. How to use a filter in a controller?
  12. CORS with spring-boot and angularjs not working
  13. Angular.js directive dynamic templateURL
  14. AngularJS access scope from outside js function
  15. Adding parameter to ng-click function inside ng-repeat doesn’t seem to work
  16. How do I call an Angular.js filter with multiple arguments?
  17. Is there a difference between promise.then.then vs promise.then; promise.then [duplicate]
  18. How to Troubleshoot Angular “10 $digest() iterations reached” Error
  19. Testing AngularJS with Selenium
  20. Using comma as list separator with AngularJS
  21. Getting MathJax to update after changes to AngularJS model
  22. Adding google plus login to ionic app
  23. What’s the best way to cancel event propagation between nested ng-click calls?
  24. Can someone provide an example of a $destroy event for scopes in AngularJS?
  25. Multiple Module in Angularjs
  26. WebAPI CORS with Windows Authentication – allow Anonymous OPTIONS request
  27. Ui-Router $state.go inside $on(‘$stateChangeStart’) is cauzing an infinite loop
  28. AngularJS Service Passing Data Between Controllers
  29. AngularJS: Uncaught Error: [$injector:modulerr] Failed to instantiate module?
  30. AngularJS – Directives vs Controllers

Leave a Comment