AngularJS version 1.3.13 throws an error Error: [ngModel:numfmt] Expected `0.00` to be a number

[NaomiN]

I am getting the following error:

 Error: [ngModel:numfmt] Expected `0.00` to be a number
http://errors.angularjs.org/1.3.13/ngModel/numfmt?p0=0.00
    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)

---

However, 0.00 is a number, so why would I see such an error?

The object generating this error is this:

  <input type="number" name="creditLimit"
                           id="creditLimit"
                           ng-model="currentAccount.crLimit"
                           class="form-control"
                           min="0"
                           placeholder="1500.00"
                           data-sm:number data-sm:number-format data-accuracy="2" />

[NaomiN]

If I remove the last line for the custom directive smNumber, I don't get that error.

[matsko]

Could you please provide a working example of your code using plunkr? http://plnkr.co/

[NaomiN]

It's a bit tricky as this is part of a big complex project, but I'll try later on. I've traced the code and the value was coming as "0.00" (e.g. string) and the first check for not empty was returning false and then the second check for isNumber was returning false as well (perhaps because the value was passed as a string).

[NaomiN]

Hi Matias,

The failing code is this:

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;
});

The isNumber function checks the typeof value and not if that value is a
number or not.

In our case we use the following code in HTML:

@Labels.percentage:

ng-model="currentSpecial.discPct" type="number"
data-sm:number
data-sm:number-format data-accuracy="0">
%

@String.Format(Messages.mustBeBetweenXandY, Labels.percentage, "-100",
"100")

and I attach the smNumber and smNumberFormat directives to this email. I've
tested with input type="text" and there is no error, but then min/max
properties are not respected.

What would you suggest for the fix here?

Thanks in advance.

On Tue, Feb 24, 2015 at 12:31 AM, Matias Niemelä notifications@github.com
wrote:

Could you please provide a working example of your code using plunkr?
http://plnkr.co/

—
Reply to this email directly or view it on GitHub
#11157 (comment)
.

[NaomiN]

So this is the current angularjs implementation of the number format:

function numberInputType(scope, element, attr, ctrl, $sniffer, $browser) {
badInputChecker(scope, element, attr, ctrl);
baseInputType(scope, element, attr, ctrl, $sniffer, $browser);

ctrl.$$parserName = 'number';
ctrl.$parsers.push(function(value) {
if (ctrl.$isEmpty(value)) return null;
if (NUMBER_REGEXP.test(value)) return parseFloat(value);
return undefined;
});

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;
});

if (attr.min || attr.ngMin) {
var minVal;
ctrl.$validators.min = function(value) {
return ctrl.$isEmpty(value) || isUndefined(minVal) || value >= minVal;
};

attr.$observe('min', function(val) {
  if (isDefined(val) && !isNumber(val)) {
    val = parseFloat(val, 10);
  }
  minVal = isNumber(val) && !isNaN(val) ? val : undefined;
  // TODO(matsko): implement validateLater to reduce number of

validations
ctrl.$validate();
});
}

if (attr.max || attr.ngMax) {
var maxVal;
ctrl.$validators.max = function(value) {
return ctrl.$isEmpty(value) || isUndefined(maxVal) || value <= maxVal;
};

attr.$observe('max', function(val) {
  if (isDefined(val) && !isNumber(val)) {
    val = parseFloat(val, 10);
  }
  maxVal = isNumber(val) && !isNaN(val) ? val : undefined;
  // TODO(matsko): implement validateLater to reduce number of

validations
ctrl.$validate();
});
}
}

I am guessing something has changed since the version 1.10.2 we were using
before. My question is - it looks like we can not use input type="number"
and our 2 directives at the same time. However, if we're using input
type="text" and our directives, then the min/max attributes are not
observed (obviously).

So, what is the best course of actions for us to be able to format the
number with commas and predefined number of decimals (called accuracy in
our case) and also have min/max attributes to operate? Since our directive
already attempts to format the value it's coming as a string to that
function and then the isNumber check is failing.

Thanks in advance.

I am thinking I may try to add lower priority to our formatting directive
to ensure correct behavior.

UPDATE. Adding priority: - 3 to the top of our smNumberFormat directive didn't change the outcome, I still get the same error.

On Tue, Feb 24, 2015 at 1:39 PM, Naomi Nosonovsky nnosonovsky@gmail.com
wrote:

Hi Matias,

The failing code is this:

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;
});

The isNumber function checks the typeof value and not if that value is a
number or not.

In our case we use the following code in HTML:

@Labels.percentage:

ng-model="currentSpecial.discPct" type="number"
data-sm:number
data-sm:number-format data-accuracy="0">
%

@String.Format(Messages.mustBeBetweenXandY, Labels.percentage, "-100",
"100")

and I attach the smNumber and smNumberFormat directives to this email.
I've tested with input type="text" and there is no error, but then min/max
properties are not respected.

What would you suggest for the fix here?

Thanks in advance.

On Tue, Feb 24, 2015 at 12:31 AM, Matias Niemelä <notifications@github.com

wrote:

Could you please provide a working example of your code using plunkr?
http://plnkr.co/

—
Reply to this email directly or view it on GitHub
#11157 (comment)
.

[Narretz]

Can you please put a number input with your custom directives into a plnkr? The framework code is not particularly helpful, I'm afraid.

[andr3medeiros]

I am having same issue with an customized angular touchspin directive (https://gist.github.com/jdelibas/b20160fced5963a338ab#file-spindirective-js) of jquery's touchspin plugin (http://www.virtuosoft.eu/code/bootstrap-touchspin):

'use strict';

angular.module('app')
    .directive('spin', function() {
        return {
            templateUrl: 'components/templates/touchspin.html',
            scope: {
                bindModel:'=ngModel',
                change   :'&ngChange'
            },
            restrict: 'E',
            require: 'ngModel',
            bindAttr: '=',
            link: function(scope, element, attrs) {
                var min,max,step,input,initial, decimals, prefix, verticalbuttons, stepinterval;
                element = angular.element(element);

                if(typeof attrs === 'undefined')throw new Error('Spin.js attributes missing');

                min = typeof attrs.min !== 'undefined' ? parseFloat(attrs.min) : 1;
                max = typeof attrs.max !== 'undefined' ? parseFloat(attrs.max) : 999;
                step = typeof attrs.step !== 'undefined' ? parseFloat(attrs.step) : 1;
                prefix = typeof attrs.prefix !== 'undefined' ? attrs.prefix : '';
                decimals =  typeof attrs.decimals !== 'undefined' ? parseInt(attrs.decimals) : 0;

                input = $('input[name="spin"]',element);

                input.TouchSpin({
                    min: min,
                    max: max,
                    step: step,
                    decimals: decimals,
                    prefix: prefix,
                    forcestepdivisibility : 'none',
                    booster : false
                });

                input.on('change', function(e){
                    scope.value = parseFloat(input.val());

                    if(scope.change) {
                        scope.change(scope.value);
                    }

                    if(!scope.$$phase) {
                        scope.$apply();
                    }

                });

            }
        };
    });

"[ngModel:numfmt] Expected 0.02 to be a number
http://errors.angularjs.org/1.3.0/ngModel/numfmt?p0=0.02"

I tried put that function into $apply too:

scope.$apply(function() {
if(scope.change) {
                        scope.change(scope.value);
                    }
});

[NaomiN]

I'm getting this error now: Error: [ngModel:numfmt] Expected {"$viewValue":null,"$modelValue":null,"$validators":{},"$asyncValidators":{},"$parsers":[null,null],"$formatters":[null],"$viewChangeListeners":[],"$untouched":true,"$touched":false,"$pristine":true,"$dirty":false,"$valid":true,"$invalid":false,"$error":{},"$name":"payment","$options":null} to be a number

For the following markup:

                

                
                

                    

                        

                            
                        
                      
                        

                            

                                @Labels.currencySymbol
                                
                                

                                    @Messages.onlyPositivePayments
                                
                            
                        
                    
                
                

                    

                        
@Labels.pageTotal
                        
{{total('invoiceBalance')|currency}}
                        
{{total('payment')|currency}}
                    
                
            

So, input type="number" doesn't seem to be working in the table created using ng-repeat directive.

[NaomiN]

I'll try to reply using e-mail: I'm getting an error using this html:

	@*{{result.invoice_No}}*@ {{ result.invoice_No }}	{{result.descrip}}	{{result.dateCreated |date: 'medium'}}	{{result.invoiceBalance | currency}}	@Labels.currencySymbol @Messages.onlyPositivePayments
@Labels.pageTotal				{{total('invoiceBalance')|currency}}	{{total('payment')|currency}}

It seems like input type="number" is not working inside the ng-repeat
directive.

On Fri, Feb 27, 2015 at 8:44 AM, André da Silva Medeiros <
notifications@github.com> wrote:

I am having same issue with an customized angular touchspin directive (
https://gist.github.com/jdelibas/b20160fced5963a338ab#file-spindirective-js)
of jquery's touchspin plugin (
http://www.virtuosoft.eu/code/bootstrap-touchspin):

'use strict';

angular.module('app')
.directive('spin', function() {
return {
templateUrl: 'components/templates/touchspin.html',
scope: {
bindModel:'=ngModel',
change :'&ngChange'
},
restrict: 'E',
require: 'ngModel',
bindAttr: '=',
link: function(scope, element, attrs) {
var min,max,step,input,initial, decimals, prefix, verticalbuttons, stepinterval;
element = angular.element(element);

            if(typeof attrs === 'undefined')throw new Error('Spin.js attributes missing');

            min = typeof attrs.min !== 'undefined' ? parseFloat(attrs.min) : 1;
            max = typeof attrs.max !== 'undefined' ? parseFloat(attrs.max) : 999;
            step = typeof attrs.step !== 'undefined' ? parseFloat(attrs.step) : 1;
            prefix = typeof attrs.prefix !== 'undefined' ? attrs.prefix : '';
            decimals =  typeof attrs.decimals !== 'undefined' ? parseInt(attrs.decimals) : 0;

            input = $('input[name="spin"]',element);

            input.TouchSpin({
                min: min,
                max: max,
                step: step,
                decimals: decimals,
                prefix: prefix,
                forcestepdivisibility : 'none',
                booster : false
            });

            input.on('change', function(e){
                scope.value = parseFloat(input.val());

                if(scope.change) {
                    scope.change(scope.value);
                }

                if(!scope.$$phase) {
                    scope.$apply();
                }

            });

        }
    };
});

"[ngModel:numfmt] Expected 0.02 to be a number
http://errors.angularjs.org/1.3.0/ngModel/numfmt?p0=0.02"

I tried put that function into $apply too:

scope.$apply(function() {if(scope.change) {
scope.change(scope.value);
}
});

—
Reply to this email directly or view it on GitHub
#11157 (comment)
.

[Narretz]

Again, please provide a minimal reproducible example, either in a plnkr.co in a gist or even copy/ pasted here. Your snippets so far are impossible to debug.