Angular directive to change input values on insert

Question

I want to change the user input and model using a cutom directive like:

app.directive('changeInput', function ($parse) {
    return {
        require: 'ngModel',
        link: function (scope, elm, attrs, ctrl) {
            //insert logic here
            });
        }
    };
});

So any time the user will insert char in:

<input 
   name="inputText" 
   type="text"
   change-input
   data-ng-model="data.name"
>

The input will change from 'a' to 'b' for example. I just need the right logic for the change, I hane tried using $event and preventDefault() but it created more problams.

Thanks.

Its not clear what you asking. What should happen if the input change from "a" to "b"? — lin
– lin, Commented Feb 20, 2017 at 8:39

Arno_Geismar · Accepted Answer · 2017-02-20 12:51:25Z

1

You could use build in parsers and formatters of ngModel When a model change is detected the formatter and parser will fire. the formatter for data from a change in the model to the view and parser for a change from the view to the model.

app.directive('changeInput', function() {
  return { restrict: 'A',
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel) {
      if(ngModel) { // Don't do anything unless we have a model

        ngModel.$parsers.push(function (value) {
        //value is a
        // 'value' should be your model property
        ngModel.$setValidity('value', true);    
        // sets viewValue

         ngModel.$setViewValue(value); 

        // renders the input with the new viewValue
        ngModel.$render()
        return "b" // you are changing it to b. so now in your controller the value is b and you can trigger your save function
        });

        ngModel.$formatters.push(function (value) {
         //value is b
         return "a" // you are changing it to a. So now in your view it will be changed to a
        });

      }
    }
  };
});

edited Feb 20, 2017 at 12:51

answered Feb 20, 2017 at 8:39

Arno_Geismar

2,3301 gold badge19 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Itsik Mauyhas Over a year ago

Great, but if I want to change string input.

Arno_Geismar Over a year ago

@ItsikMauyhas I updated my answer if you need anything more specific please provide me with more information

Itsik Mauyhas Over a year ago

Hi, the view does not update in $parsers block, is there a way?

Arno_Geismar Over a year ago

@ItsikMauyhas try it now I modified the code this means a digest cycle is already ongoing

Collectives™ on Stack Overflow

Angular directive to change input values on insert

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related