How to format number textbox in angular js?

Question

<div class="input-group-icon">Max <span class="error">
  <div class="input-group">
     <input style="border-right:none;" name="investment_amount_max" ng-model="attributes.investment_amount_max"   max="{{constants.globalValue.maxNumber}}" min="{{attributes.investment_amount_min}}" type="number" ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/" step="0.01" required  class="form-control input-sm m-bot15" /> 
     <span style="border-left:none; background:none; border-color:#e2e2e4;" class="input-group-addon" id="basic-addon2">{{programname.country.currency_symbol?programname.country.currency_symbol:'$sss'}}</span> </div>
     <span id='number-default'>{{attributes.investment_amount_max | number}}</span>
     <label for="investment_amount_max" ng-show="submittab1 && attributesForm.investment_amount_max.$error.required" class="error">{{formValidation.required}}</label> 
     <label for="investment_amount_max" ng-show="submittab1 && attributesForm.investment_amount_max.$error.min" class="error"> {{formValidation.minMax}} </label>
     <label for="investment_amount_max" ng-show="submittab1 && attributesForm.investment_amount_max.$error.max" class="error"> {{formValidation.numberMax}} </label>
     <label for="investment_amount_min" ng-show="submittab1 && attributesForm.investment_amount_max.$error.number" class="error">{{formValidation.errorNumber}}</label>

  </div>
</div>

Refer my above coding,How to format number in inside textbox number using angular js ?

I already told you on [your previous thread](http://stackoverflow.com/questions/38138770/how-to-show-numbers-in-bilion-format-and-save-in-angular-js/38138882?noredirect=1#comment63709622_38138882) — Tom Shen, Jul 01 '16 at 10:36
Possible duplicate of [How do I add Thousands separator to my html form](http://stackoverflow.com/questions/9773689/how-do-i-add-thousands-separator-to-my-html-form) — Tom Shen, Jul 01 '16 at 10:38

score 0 · Answer 1 · edited May 23 '17 at 12:00

input type="number" doesn't support anything but digits.

You can use type="text" and pattern validation like pattern="[0-9]+([.,][0-9]+)*" to limit what the user may enter while automatically formatting the value using: $filter('number')(number, fractionSize) in controller

You could even set a formated label to show data while input is not focused: http://jsfiddle.net/LCZfd/6/

Maybe you should read this question: AngularJS number input formatted view

score 0 · Answer 2 · answered Oct 19 '16 at 15:25

You can use custom filters to format the output and custom directive to format while updating the text field.

Check custom filter "emptyIfZero" with ng-value or value directives. This will work for display only and if there are other input fields which are used to calculate the output. If you want to format as you are updating the text box, then you should use $parsers and $formatters. See this article for more details:

https://cameronspear.com/blog/how-cool-are-formatters-and-parsers/

When using custom directive with $parsers, make sure to call $render to update the ngModel as soon as you want to change how the value is displayed in the text box. See empty-if-zero in the Plunker sample.

Updated Plunker sample:

http://plnkr.co/edit/Fmqw0wp37Ndk1yuWvFkV?p=preview (source)

How to format number textbox in angular js?

2 Answers2