filters on ng-model in an input

Question

I have a text input and I don t want to allow users to use spaces  and everything typed will be turned into lowercase   I know I m not allowed to use filters on ng-model eg   ng-model  tags   lowercase   no spaces    I looked at creating my own directive but adding functions to  parsers and  formatters didn t update the input  only other elements that had ng-model on it   How can I change the input of that I m currently typing in   I m essentially trying to create the  tags  feature that works just like the one here on StackOverflow

User · Accepted Answer

I would suggest to watch model value and update it upon chage: http://plnkr.co/edit/Mb0uRyIIv1eK8nTg3Qng?p=preview

The only interesting issue is with spaces: In AngularJS 1.0.3 ng-model on input automatically trims string, so it does not detect that model was changed if you add spaces at the end or at start (so spaces are not automatically removed by my code). But in 1.1.1 there is 'ng-trim' directive that allows to disable this functionality (commit). So I've decided to use 1.1.1 to achieve exact functionality you described in your question.

User · Answer

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    lt input ng-model  sth  ng-trim  false  custom-validation gt    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

User · Answer

If you are using read only input field  you can use ng-value with filter   for example   ng-value  price   number 8

User · Answer

You can try this    scope  watch  tags   function          scope tags    filter  lowercase    scope tags

User · Answer

I had a similar problem and used   ng-change  handler objectInScope      in my handler I call a method of the objectInScope to modify itself correctly  coarse input   In the controller I have initiated somewhere that    scope objectInScope   myObject     I know this doesn t use any fancy filters or watchers    but it s simple and works great  The only down-side to this is that the objectInScope is sent in the call to the handler

User · Answer

A solution to this problem could be to apply the filters on controller side     scope tags    filter  lowercase    scope tags    Don t forget to declare  filter as dependency

User · Answer

If you are doing complex  async input validation it might be worth it to abstract ng-model up one level as part of a custom class with its own validation methods   https   plnkr co edit gUnUjs0qHQwkq2vPZlpO p preview  html   lt div gt      lt label for  a  gt input a lt  label gt     lt input      ng-class    is-valid   vm store a isValid    true   is-invalid   vm store a isValid    false       ng-keyup  vm store a validate   isEmpty         ng-model  vm store a model      placeholder    vm store a isValid     false   vm store a warning             id  a    gt      lt label for  b  gt input b lt  label gt     lt input      ng-class    is-valid   vm store b isValid    true   is-invalid   vm store b isValid    false       ng-keyup  vm store b validate   isEmpty         ng-model  vm store b model      placeholder    vm store b isValid     false   vm store b warning             id  b    gt    lt  div gt    code   function        const     window       angular      module  app            directive  componentLayout   layout       controller  Layout     Validator   Layout        factory  Validator   function     return Validator             Layout controller       function Layout Validator        this store           a  new Validator  title   input a           b  new Validator  title   input b                      layout directive       function layout         return         restrict   EA         templateUrl   layout html         controller   Layout         controllerAs   vm         bindToController  true                   Validator factory         function Validator config        this model   null      this isValid   null      this title   config title         Validator prototype isEmpty   function checkName        return new Promise  resolve  reject    gt          if     s    test this model     this model length     0            this isValid   false          this warning      this title  cannot be empty           reject   merge this   test  checkName                   else           this isValid   true          resolve   merge this   test  checkName                                       memberof Validator       param  array  checks - array of strings  must match defined Validator class methods          Validator prototype validate   function checks        Promise        all checks map check   gt  this check  check           then res   gt    console log  pass   res             catch e   gt    console log  fail   e

User · Answer

Use a directive which adds to both the  formatters and  parsers collections to ensure that the transformation is performed in both directions   See this other answer for more details including a link to jsfiddle

[angularjs] filters on ng-model in an input

Examples related to angularjs

Examples related to angularjs-filter

Examples related to dom-manipulation

Examples related to angularjs-ng-model