Hi everybody,

After attempts to upgrade our current project to the latest angularJs we're getting some new JavaScript errors.

One error is about number formatting. It seems to be related to our 2 custom directives smNumber and smNumberFormat. The first one seems pretty straightforward except for one comment which seems wrong to me:

 //Set the default decimal place to two, if accuracy is not specified
                    var accuracy = parseInt(attrs.accuracy) || 0;

I think that code is actually setting the accuracy to 0 if not specified? Or what exactly this code is doing, if, suppose, we didn't set accuracy property?

This is the code of the second directive which I believe is the cause of the trouble:

(function () {
    'use strict';

    var app = angular.module('sysMgrApp');

    app.directive('smNumberFormat', ['$filter', function ($filter) {
        return {
            restrict: 'A', // only activate on element attribute
            require: '?ngModel', // get a hold of NgModelController            
            link: function (scope, element, attrs, ngModel) {
                if (!ngModel) return; // do nothing if no ng-model

                //Set the default decimal place to zero, if accuracy is not specified
                var accuracy = parseInt(attrs.accuracy) || 0;
                var stripCommas = attrs.stripCommas || true;
                
                ngModel.$render = function () {
                    return element.val(ngModel.$viewValue);
                };

                var format = function (newValue) {
                    if (accuracy > 0) {
                        newValue = parseFloat(newValue);
                    } else {
                        newValue = parseInt(newValue);
                    }

                    //Let's not show any value if it's zero or not a number, so the placeholder text is displayed instead
                    if (isNaN(newValue)) return undefined;
                    
                    newValue = $filter('number')(newValue, accuracy);
                    
                    if (stripCommas) {
                        newValue = newValue.split(",").join("");
                    } 

                    return newValue;
                };
                              
                function bind() {
                    return ngModel.$formatters.push(function (value) {
                        return format(value);
                    });
                }

                bind();
                
                element.on('blur', function () {
                    return element.val(format(ngModel.$viewValue));
                });
            }
        };
    }]);
})();

Can you explain what this directive is doing exactly?

The way we use it in the forms is this:

<input class="form-control" id="discFlat" name="discFlat"
                                           ng-model="currentSpecial.discFlat" type="number" placeholder="0"
                                           data-sm:number data-sm:number-format data-accuracy="2">

and the error I'm getting is the following:

Error: [ngModel:numfmt] Expected `40` to be a number
http://errors.angularjs.org/1.3.13/ngModel/numfmt?p0=40
    at REGEX_STRING_REGEXP (angular.js:63)
    at Array.<anonymous> (angular.js:19884)
    at Object.ngModelWatch (angular.js:23289)
    at Scope.$get.Scope.$digest (angular.js:14235)
    at Scope.scopePrototype.$digest (hint.js:1468)
    at Scope.$get.Scope.$apply (angular.js:14506)
    at Scope.scopePrototype.$apply (hint.js:1478)
    at done (angular.js:9659)
    at completeRequest (angular.js:9849)
    at XMLHttpRequest.requestLoaded (angular.js:9790)

The actual error comes from this code by angular.js:

 ctrl.$formatters.push(function(value) {
    if (!ctrl.$isEmpty(value)) {
      if (!isNumber(value)) {
        throw $ngModelMinErr('numfmt', 'Expected `{0}` to be a number', value);
      }
      value = value.toString();
    }
    return value;
  });

and when I trace this code in Dev. Tools I can see that the value comes as a string, e.g. "40" and thus the isNumber function returns false.

The question is - what should I fix in the above mentioned directive to avoid the problem?

Thanks in advance.

UPDATE. I'm thinking that we should not use both type="number" and our own directive at the same time as the directive seems to be doing what type="number" should be doing. I'll try removing type="number" and using type="text" and see if it fixes the problem.

UPDATE 2. By changing input type="text" from input type="number" I got rid of the error. The only problem is that this is used in many places in our application, so we would need to change all of them.