I have a small AngularJS (1.x) directive so my input field does not show the value the is in the model, but formats it before (and parses the user input from the input field’s format):
angular.module('appModule')
.directive('fooformat', function() {
function parse(formattedValue) {
return formattedValue.replace('foo', '');
}
function format(value) {
return value + "foo";
}
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, element, attr, ngModel) {
ngModel.$parsers.push(parse);
ngModel.$formatters.push(format);
}
};
});
This does not seem to work, the fields always get empty, even though that debugging shows that the conversions are done as expected. E.g. for the string "1" the return value would become "1foo".
What seems to work is, if the changes are numerical. E.g.:
function parse(formattedValue) {
return formattedValue - 1;
}
function format(value) {
return value + 1;
}
This would format "1" as 2, and suddenly it would work.
Well, it’s not AngularJS formatter/parser which is sensitive to the types, but the HTML5 input field where I use it:
<input fooformat type="number ng-model="" />
needs to be changed to
<input fooformat type="text" ng-model="foo" />