how to display trailing zeros in input type number (angular, js)

Question

I have to display in UI on input tag, even whole numbers like 15 as 15.00 (or as many decimals user decides upon).
I'm currently using an input of type number with attributes min and max.

So far, the only options which I have seen online are to use input type text. (trying not to as it doesn't make sense to switch to text, as I'm only working with numbers).

I have tried using step attribute but doesn't cover the case for trailing zeros (neither chrome or firefox will show trailing zeros for a number).

Any help will be greatly appreciated.

If decimals set as 4, the following needs to happen: ex.
15.2 shown as 15.2000
100 shown as 100.0000

Hi Welcome to StackOverFlow. Please provide minimal-reproducible-example. That helps others to figure out your situation little better. — Shivam
– Shivam, Commented Oct 9, 2019 at 21:13
(trying not to as it doesn't make sense to switch to text, as I'm only working with numbers) I will be cruel and say, try, 00001 = 1, but "00001" != 1.... Hint hint (if its only for UI ofc) — Pogrindis
– Pogrindis, Commented Oct 9, 2019 at 21:34
@Adriano first time i hear about input mask, do you know of any good tutorials where i can learn more about this? — ArbolDie
– ArbolDie, Commented Oct 16, 2019 at 18:04
Well, this is a good place to start: css-tricks.com/input-masking — Adriano
– Adriano, Commented Oct 16, 2019 at 22:13

demo · Accepted Answer · 2021-02-04 16:01:24Z

3

To achieve expected result, use below of using ng-blur with parseFloat and toFixed

Option 1:

Use ng-blur option to format entered number by parseFloat with toFixed(4)

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $filter) {
  $scope.format = function(event, $filter) {
    const val = event.target.value;
    const decimalCnt = val.split('.')[1] ? val.split('.')[1].length : 0;
    event.target.value = decimalCnt && decimalCnt > 4 ? event.target.value : parseFloat(val).toFixed(4)
  }
});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<body>

  <div ng-app="myApp" ng-controller="myCtrl">
    <input type="text" ng-model="test" ng-blur="format($event)"><br>
  </div>

</body>

</html>

codepen - https://codepen.io/nagasai/pen/xxxGoNK

Option 2:
Create attribute directive for displaying entered value with decimal values

var app = angular.module('myApp', []);

app.controller("myCtrl", function($scope, $filter) {});

app.directive("decimalValues", function($filter) {
  return {
    restrict: "A",
    require: "ngModel",
    link: function(scope, element, attr, ngModel) {
      element.on('blur', function(e) {
        let val = element.val();
        const decimalCnt = val.split('.')[1] ? val.split('.')[1].length : 0;
        val = decimalCnt && decimalCnt > 4 ? val : parseFloat(val).toFixed(4)
        element.val(val)
      })
    }
  };
});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<body>

  <div ng-app="myApp" ng-controller="myCtrl">

    <input type="text" ng-model="test" decimal-values><br>

    <br>

  </div>

</body>

</html>

codepen - https://codepen.io/nagasai/pen/NWWqZQY

edited Feb 4, 2021 at 16:01

demo

6,29519 gold badges84 silver badges162 bronze badges

answered Oct 9, 2019 at 20:29

Naga Sai A

11k1 gold badge24 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ArbolDie Over a year ago

will this change the actual value. ex 10.123456 will be changed to 10.1234 ? i'm trying not to loose the rest of the decimal value

Pogrindis Over a year ago

@ArbolDie the toFixed is the decimal point you can range to.. You should read the answer first, but now im off to test what an infinite toFixed will do for Pie in the browser.

georgeawg · Accepted Answer · 2019-10-10 02:59:33Z

1

One option is to use a custom directive:

app.directive("toFix", function() {
  return {
    require: "ngModel",
    link: postLink
  }

  function postLink(scope,elem,attrs,ngModel) {
    ngModel.$render = function() {
      elem.val(parseFloat(ngModel.$viewValue).toFixed(attrs.toFix));
    }
    ngModel.$parsers=[(_ => parseFloat(_))];
    ngModel.$formatters=[(_ => parseFloat(_).toFixed(attrs.toFix))];
  }
})

Usage:

<input type="number" to-fix="4" ng-model="num1">

The DEMO on PLNKR

edited Oct 10, 2019 at 2:59

answered Oct 9, 2019 at 23:11

georgeawg

49k13 gold badges78 silver badges98 bronze badges

Comments

ansavchenco · Accepted Answer · 2019-10-09 20:18:11Z

0

As far as I know there is no way to do that with HTML only. But you can use JavaScript's Number.prototype.toFixed. For example:

15.2.toFixed(4) // 15.2000
100..toFixed(4) // 100.0000

answered Oct 9, 2019 at 20:18

ansavchenco

7041 gold badge8 silver badges14 bronze badges

1 Comment

ArbolDie Over a year ago

yea, i have seen this but unfortunately not an option as toFixed will cut off any extra decimals in the value, which can then affect other results

Collectives™ on Stack Overflow

how to display trailing zeros in input type number (angular, js)

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related