AngularJS directive to force a number format to the model

Question

I need an input field with a mask but I want the model to keep the masked value.

Phone number should be displayed and stored in db in this format: ## ## ## ## ##.

I am using this library: formatter.js on the Web App and I try to understand what is the best way to use it with Angular for the mobile app.

Here is what I have so far:

Directive:

.directive('curubaTelephone', function () {
    return {
        restrict: 'AC',
        replace: false,
        link: function (scope, element) {
            element.formatter({
                'pattern': '{{99}} {{99}} {{99}} {{99}} {{99}}',
                'persistent': false
            });
        }
    }
})

HTML:

    <label class="item item-input item-stacked-label">
        <span class="input-label">Fixe</span>
        <input type="text" placeholder="fixe" ng-model="fonction.perso_fixe" class="curubaTelephone">
    </label>

I have added the script in index.html:

<script src="lib/formatter/dist/jquery.formatter.min.js"></script>

The console returns :

TypeError: element.formatter is not a function
    at link (http://localhost:8100/js/directives.js:48:25)
    at invokeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:16855:9)
    at nodeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:16365:11)
    at compositeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:15714:13)
    at compositeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:15717:13)
    at publicLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:15593:30)
    at $get.boundTranscludeFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:15732:16)
    at controllersBoundTransclude (http://localhost:8100/lib/ionic/js/ionic.bundle.js:16392:18)
    at ngRepeatAction (http://localhost:8100/lib/ionic/js/ionic.bundle.js:33138:15)
    at Object.$watchCollectionAction [as fn] (http://localhost:8100/lib/ionic/js/ionic.bundle.js:22746:13) <input type="text" placeholder="fixe" ng-model="fonction.perso_fixe" class="curubaTelephone ng-pristine ng-untouched ng-valid">

By default AngularJS is not using jQuery at all, only its small sub-set called jqLite. To use jQuery plugins you'll need to include jQuery itself, too - I'd make sure that you've done it. Remember to include it (in index.html) before Angular itself, otherwise it won't get recognized by it and it'll still use jqLite instead. — bardzusny
– bardzusny, Commented May 31, 2015 at 12:55
Ok, that was the issue !! Thanks a lot @bardzusny. Please write the answer so that can accept it. — curuba
– curuba, Commented May 31, 2015 at 13:00

bardzusny · Accepted Answer · 2015-05-31 13:12:40Z

1

By default, AngularJS is not using jQuery, only its small subset called jqLite:

Without full jQuery you won't be able to use any jQuery plugins (like formatter.js).

Luckily, if you include jQuery in your index.html before AngularJS itself - Angular will automatically use it as angular.element (instead of jqLite). Then you'll be able to access full jQuery functionality - including possibility to use its plugins.

<script type="text/javascript" src="//code.jquery.com/jquery-2.1.4.min.js"></script>

More information: https://docs.angularjs.org/api/ng/function/angular.element .

edited May 31, 2015 at 13:12

answered May 31, 2015 at 13:06

bardzusny

3,8287 gold badges32 silver badges30 bronze badges

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

2 Comments

curuba Over a year ago

I still have an issue. The plugin updates the number format correctly but it is not reflected by the model. So when I save it is not saving the new value. How should I handle this?

bardzusny Over a year ago

I think that's material for another question - as name implies ("formatter") you're merely formatting value when displaying it. One way (though probably not nicest) would be re-formatting value whenever you have to use it - for example defining service function taking in original value, returning formatted one.

Collectives™ on Stack Overflow

AngularJS directive to force a number format to the model

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related