Angular, input field with a currency mask directive for money format on the fly

Question

I'm trying to create an input mask for a EU money field using http://jquerypriceformat.com/

So far in my directive, the input shows correctly to the user with the mask applied, but I believe there's something wrong, because the POST values are being sent with weird formatting, totally different than what we see in the input field.

I include the priceformat.js

<script src="js/jquery.price_format.1.8.min.js"></script>  <input type="text" currency-input ng-model...> 

And on angular:

app.directive('currencyInput', function() {     return {       require: '?ngModel',       link: function($scope, element, attrs, controller) {         element.priceFormat({             prefix: '',             centsSeparator: ',',             thousandsSeparator: '.'         });       }     }; }); 

My input shows the value with the mask correctly, but on POST data (called by angular) it's a different value, what am I missing?

input > 2.200,80 | post > 22,0080

Thanks

Answer 1

From your example I don't see that link returns something.

I would write directive something like:

.directive('format', ['$filter', function ($filter) {     return {         require: '?ngModel',         link: function (scope, elem, attrs, ctrl) {             if (!ctrl) return;               ctrl.$formatters.unshift(function (a) {                 return $filter(attrs.format)(ctrl.$modelValue)             });               ctrl.$parsers.unshift(function (viewValue) {            elem.priceFormat({             prefix: '',             centsSeparator: ',',             thousandsSeparator: '.'         });                                  return elem[0].value;             });         }     }; }]); 

Demo 1 Fiddle

If you want on start fire the filter, use $formatters:

Now link is:

link: function (scope, elem, attrs, ctrl) {             if (!ctrl) return;              var format = {                     prefix: '',                     centsSeparator: ',',                     thousandsSeparator: ''                 };              ctrl.$parsers.unshift(function (value) {                 elem.priceFormat(format);                  return elem[0].value;             });              ctrl.$formatters.unshift(function (value) {                 elem[0].value = ctrl.$modelValue * 100 ;                 elem.priceFormat(format);                 return elem[0].value;             })         } 

Demo 2 Fiddle

Answer 2

Push a $parser to the controller, and only update the value when it doesn't match the input using $setViewValue() and $render().

app.directive('currencyInput', function() {     return {       require: '?ngModel',       link: function($scope, element, attrs, controller) {         return ctrl.$parsers.push(function(inputValue) {              ...              if (result != inputValue) {                 controller.$setViewValue(res);                 controller.$render();             }         });       }     }; }); 

Here's a fiddle with the logic I used for my currency input directive: Fiddle