Angular filter not working

Question

I am coding a filter that will format phone numbers in a contact form I've built however for some reason the value in the input is never being updated and I'm not sure what I'm doing wrong.

Here's my HTML:

<div class='form-group'>
    <input name='phone' ng-model='home.contact.phone' placeholder='(Area code) Phone' required ng-bind='home.contact.phone | phone' />
</div>

and here's my filter:

(function () {
    'use strict'

    angular
        .module('Allay.phoneFilter', [])
        .filter('phone', function () {
            return function (phone) {
                if(!phone) return '';

                var res = phone + '::' // Since this isn't working, I'm doing something super simple, adding a double colon to the end of the phone number.
                return res;
            }
        });
})();

I'm not sure if you need this, but here's the controller:

(function () {
    'use strict'

    angular
        .module('Allay', [
            'Allay.phoneFilter'
        ])
        .controller('HomeController', function () {
            var home = this;
        });
})();

If I add an alert(res) before 'return res' in the filter I see the value I expect '123::', however the value in the input it's self is still just 123.

Where would I do that? I haven't seen anything in the docs about needing $scope.$apply() with a filter. — efarley
– efarley, Commented Oct 20, 2015 at 21:04
Ok, since you just changed the content of the question to invalidate my answer, I will leave this with the assumption that one of the other answers will help. — Claies
– Claies, Commented Oct 20, 2015 at 21:13

Bartosz Czerwonka · Accepted Answer · 2015-10-20 22:15:04Z

1

You need create directive to change your ngModel, like this:

.directive('phoneFormat', function() {
     return {
         require: 'ngModel',
         link: function(scope, elem, attrs, ctrl) {

             var setvalue = function() {
                 elem.val(ctrl.$modelValue + "::");
             };

             ctrl.$parsers.push(function(v) {
                 return v.replace(/::/, '');
             })


             ctrl.$render = function() {
                 setvalue();
             }

             elem.bind('change', function() {
                 setvalue();
             })

         }
     };
 });

Use in html:

<input name='phone' ng-model='contact.phone' placeholder='(Area code) Phone' required phone-format />

JS Fiddle: http://jsfiddle.net/57czd36L/1/

edited Oct 20, 2015 at 22:15

answered Oct 20, 2015 at 21:13

Bartosz Czerwonka

1,6511 gold badge11 silver badges11 bronze badges

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

7 Comments

Cyberdelphos Over a year ago

It's not necessary to create a directive, his approach using filters was right.

Bartosz Czerwonka Over a year ago

@Cyberdelphos here is your solution jsfiddle.net/wuxfurdn and in console is error - Non-assignable model expression: contact.phone | phone (<input name="phone" ng-model="contact.phone | phone" placeholder="(Area code) Phone" required="">)

efarley Over a year ago

I thought the idea was to use directives to modify the DOM behavior or add behavior to the controller and to use a filter when transforming a value such as I am doing.

efarley Over a year ago

I tried this however it doesn't appear to watch the home.contact.phone for changes as the :: is only added to the initialized value and isn't added when you edit the value.

Cyberdelphos Over a year ago

Since it is an input, then a directive is needed, you are right Bartosz

|

Igor Raush · Accepted Answer · 2015-10-20 22:23:05Z

1

Your usage of ngBind on the input is not quite correct. From the documentation,

The ngBind attribute tells Angular to replace the text content of the specified HTML element with the value of a given expression, and to update the text content when the value of that expression changes

You do not need to replace the text content of the <input> element, that wouldn't make sense. You can instead extend the formatter pipeline of the NgModelController using a directive like

app.directive('phoneFormat', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attrs, ngModel) {
            ngModel.$formatters.push(function (value) {
                if (value)
                    return value + '::';
            });
        }
    }
});

Then, in your HTML,

<input ng-model='home.contact.phone' phone-format />

In case you wanted to keep the filter you wrote (for other usages), you can actually re-use it in the directive like

app.directive('phoneFormat', [ '$filter', function ($filter) {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attrs, ngModel) {
            ngModel.$formatters.push($filter('phone'));
        }
    }
}]);

$filter('phone') simply returns the filter function registered under 'phone'. Here is a Plunker.

Note, this solution will only format data when you change the $modelValue of the NgModelController, for example like

$scope.$apply('home.contact.phone = "123-456-7890"');

If you are looking for something to update/format the value of the input as the user is typing, this is a more complicated task. I recommend using something like angular-ui/ui-mask.

answered Oct 20, 2015 at 22:23

Igor Raush

15.3k1 gold badge38 silver badges58 bronze badges

1 Comment

Igor Raush Over a year ago

@xRoyDot, Agree with you, that is a correct direction to go. But "masking" an input value as the user is typing is a notoriously difficult task to do well. When done improperly, it is very very annoying to the user. For example, you have to worry about preserving cursor position when editing the middle of the input. ui-mask does do the task well.

Shaya · Accepted Answer · 2021-09-18 12:36:20Z

Although a filter module is a good approach, I use an 'A' directive to do the dirty work because changing the element value will affect its ng-model.

However, I would only suggest this kind of solution if your actual data manipulation could sum in 3-4 lines of code; otherwise, a more thorough approach is needed. This is an example that will delete anything which isn't an integer:

(function () {
    'use strict'
    angular.module('Allay').directive('phoneValidator', function () {
        return {
            restrict: 'A',
            link: function(scope, element, attrs) {
                angular.element(element).on('keyup', function() {
                    element.val(element.val().replace(/[^0-9\.]/, ''));
                });
            }
        }
    });
})();

And than in your HTML template :

<input name="phone" ng-model="home.contact.phone" placeholder="(Area code) Phone" phoneValidator required/>`

Ori Price · Accepted Answer · 2015-10-21 06:01:52Z

-2

You should remove your "ng-bind" cause you are filtering it and what is presented is what in the ng-model. use value instead.

    <input name='phone' ng-model='home.contact.phone | phone' value="{{contact.phone | phone}}"  />

see working example: JsFiddle

edited Oct 21, 2015 at 6:01

answered Oct 20, 2015 at 21:14

Ori Price

4,3112 gold badges24 silver badges37 bronze badges

4 Comments

Cyberdelphos Over a year ago

He has already changed/corrected the double module definition in his question... so only your first point applies here...

efarley Over a year ago

For some reason the input in your example can't be changed. It's fixed to whatever value it's init with.

efarley Over a year ago

I see that it works using $scope which is odd, but regardless angular best practice says not to use $scope in this way, hence the var home = this; (best practice)

Ori Price Over a year ago

@efarley - updated my Fiddle. now its not using $scope.

Collectives™ on Stack Overflow

Angular filter not working

4 Answers 4

7 Comments

1 Comment

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

1 Comment

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related