Variable with number produces always 'is not a valid number'

ionic-v1
1

Hi!

In my page I use variables from the controller of the page. For example:

<label class="item item-input item-stacked-label">
  <span class="input-label">Projekt Id:</span>
  <input type="number" placeholder="0" value="{{cpc.projektid}}" disabled>
</label>

The controller does some calculation over a factory, and get’s also some data from an SQLite database. If I check the type of my variables in the controller or in the factory, i get for Example:

console.log(typeof cpcVm.projektid); => number
console.log(angular.isNumber(cpcVm.projektid)); 0> true

So for me, this means, that the value of the variable is a number!?

But I get always the warning “The specified value “{{cpc.projektid}}” is not a valid number. The value must match to the following regular expression: -?(\d+|\d+.\d+|.\d+)([eE][-+]?\d+)?”

For the projektid this is not a big issue, but I have more complicated calculations, and I need also set some filters, which work only if the number is a number. For example:

I tried already to give an additonal parseFloat() in my controller and the factory, but there is no change. The controller and the factory say it’s a number, but in the html it creates an error, and I can’t use the filter.

Another strange thing: If I set the value of the variable in the factory or the controller manually (for example return 12;), than it works.

Any ideas?

Thanks,
Christian.

2

You need to define an ng-model on the input and not use value="". By default, value="9" makes 9 a string, not a number…and thus type="number" is throwing an error. The HTML input field is actually a string field, when the form is submitted, if type="number", the string is converted to a number when passed internally. But when rendering HTML with values in the input field, they are written as string…thus throwing the error.

Your regular expression won’t treat it the same way…\d+ works on both numbers and strings being evaluated. ie:

var pat = /^\d+$/ ;
var a = 123 ;
var b = "123"
pat.test(a) ;  // returns true
pat.test(b) ; // returns true

So to fix this, and not throw the error, it would be:

<input type="number" placeholder="0" ng-model="cpc.projectid" disabled>