input [number] doesn't evaluate stringified numbers

[ex-nerd]

For a given input:

<input type="number" ng-model="mynum" />

The following really should be true:

$scope.mynum = 5;
$scope.mynum = 5.0;
$scope.mynum = '5';
$scope.mynum = '5.00';

Instead, the second results in 5 (not the intended 5.0) and the last 2 result in a blank field presumably due to falsely failed validation.

This makes it basically impossible to use a text field for a price, to which I would like to apply outside formatting (via an angular-ui blur event) to make sure my prices have the correct 2 decimal places that users expect.

Please consider using a simple /^-?\d+(.\d*)?$/ regex to validate inputs to number fields set by outside forces rather than whatever you currently use (I believe you're already doing something similarly flexible when validating user-supplied input).

[pkozlowski-opensource]

http://jsfiddle.net/qZu6P/1/

[petebacondarwin]

How about using a normal text field and creating some kind of currency validator directive that will do the formatting, conversion and check the validity at the same time?

[ex-nerd]

Rounded decimal numbers aren't always currency.

[petebacondarwin]

@ex-nerd : Oops sorry, I was mixing up my issues. There was another one that was talking about putting currency values into an input. But my general idea still holds. Make a "decimal" directive that will do validation etc.

[pkozlowski-opensource]

@ex-nerd the input type number directive doesn't apply any special formatting - it just displays a value as given by JavaScript. If you do the following:

var price = 5.00;
console.log(price);

you will get 5 as the result.

Having said this AngularJS allows you to define whatever formatting you need. It is enough to create a simple directive that will plug into the NgModelController#$formatters pipeline as described here: http://docs.angularjs.org/guide/forms

This approach makes sense since AngularJS can accommodate for all the formatting needs.

Here is the jsFiddle that shows as simple price directive that delegates to the number filter to output model value in a desired format: http://jsfiddle.net/MS7Qd/

Not sure what else could be done by default on the AngularJS side, for me a custom formatting directive is a way to go.

[pkozlowski-opensource]

Closing for now, you can create a custom formatter as shown in the jsfiddle.