input return number instead string in AngularJS

Question

I have a form with several inputs. It works fine but the problem comes when I fill the input with the number 0. Other numbers are good. 1 is interpreted "1" etc.

Only problem is 0. I would like to force value to string even if it's 0.

 <input type="text" ng-model="project.cible" required />

Result :

 { 
   cible: 0
 }

Instead :

 { 
   cible: "0"
 }

Answer 1

By default, all values from an input tag are strings. This is true for every browser. If you want to convert the value to an int, use parseInt(value). If you want to convert the value to a float, use parseFloat(value). Before you do either of those, you should check to be sure it is a number. Your other option is to change the type of the input to number.

Answer 2

I think it's best to keep your model values as numbers instead of strings if it makes sense from a data modelling perspective. That way you can do sums, comparisons etc more easily even in places were you don't have enough control to write javascript conversion code, like an expression:

<div ng-show="project.cible + project.someOtherNum > 0">I'm visible</div>

This can be done by changing the input type to type="number". Angular has a special directive for this case which (among other things) adds a parser/formatter in the associated ngModelController:

ctrl.$parsers.push(function(value) {
    var empty = ctrl.$isEmpty(value);
    if (empty || NUMBER_REGEXP.test(value)) {
        ctrl.$setValidity('number', true);
        return value === '' ? null : (empty ? value : parseFloat(value));
    } else {
        ctrl.$setValidity('number', false);
        return undefined;
    }
});

ctrl.$formatters.push(function(value) {
    return ctrl.$isEmpty(value) ? '' : '' + value;
});

Valid input is converted to float prior to updating the model property, and model properties are converted to strings prior to updating the DOM element.