No zeros in numeric inputs

Question

I need to display the leading zeros in integers between 00-09 in the input field of the number. I am using angularJS.

View / template for input field (sorry for the style in html):

<script type="text/ng-template" id="form_field_time"> <h3 style="color:coral ;">{{field.displayName}}</h3> <div ng-controller="timeAdjustCtrl"> <input style="float:left; width:auto; margin-right:5px;" type="number" min='0' max='23' placeholder="HH" ng-model="timeHH" ng-change="adjustTimeHhMm(timeHH, timeMM, field)" ng-init="initTimeValues(field)" /> <p style="float:left; line-height:50px;font-size:1em;">:</p> <input style="float:left;width:auto; margin-left:5px;" type="number" min='0' max='59' step="1" placeholder="MM" ng-model="timeMM" ng-change="adjustTimeHhMm(timeHH, timeMM, field)" ng-init="initTimeValues(field)" /> <p style="float:left; line-height:50px;font-size:1em;"> {{field.theValues[0]}}</p> <br style="clear:both;" /> </div> </script> 

My controller:

  app.controller('timeAdjustCtrl', ['$scope', function ($scope) { $scope.adjustTimeHhMm = function(hours, minutes, field) { console.log($scope.timeHH); var strHH = String(hours); var strMM = String(minutes); var path = "00"; var newHH = path.substring(0, path.length - strHH.length) + strHH; var newMM = path.substring(0, path.length - strMM.length) + strMM; var newHhMm = String(newHH+':'+newMM); console.log(newHH + ':' + newMM); field.theValues[0] = newHhMm; console.log($scope.timeHH); } $scope.initTimeValues = function(field){ if (field.theValues[0] != 'undefined'){ $scope.timeHH = parseInt(field.theValues[0].substring(0,2)); $scope.timeMM = parseInt(field.theValues[0].substring(3,5)); } } } ]); 

This input field or a set of two input fields sets the time value (hours and minutes), which is stored as one value (which remains in the desired format (HH: MM = ex => 01:07)). The ng-model values ​​($ scope.timeHH and $ scope.timeMM) do not contain leading zeros in the input field.

I found the answer to this question, but I cannot get it to work. This is ( Answer ).

Here is the ode to the directive. It does not start blurring and does not give errors. Can anyone see problems with structure or syntax?

View:

 <script type="text/ng-template" id="form_field_time"> <h3 style="color:coral ;">{{field.displayName}}</h3> <div ng-controller="timeAdjustCtrl"> <input my-decimal style="float:left; width:auto; margin-right:5px;" type="number" min='0' max='23' placeholder="HH" ng-model="timeHH" ng-change="adjustTimeHhMm(timeHH, timeMM, field)" ng-init="initTimeValues(field)" /> <p style="float:left; line-height:50px;font-size:1em;">:</p> <input my-decimal style="float:left;width:auto; margin-left:5px;" type="number" min='0' max='59' step="1" placeholder="MM" ng-model="timeMM" ng-change="adjustTimeHhMm(timeHH, timeMM, field)" ng-init="initTimeValues(field)" /> <p style="float:left; line-height:50px;font-size:1em;"> {{field.theValues[0]}}</p> <br style="clear:both;" /> </div> </script> 

Directive (captures the blur event in the input field and avoids zero cropping) (placed under my controller for input fields (not inside)):

  app.directive('myDecimals', function() { return { require: 'ngModel', link: function(scope, elm, attrs, ctrl) { elm.blur(function() { var val = ctrl.$viewValue; ctrl.$setViewValue(val * 1); ctrl.$render(); }); } }; }); 

Answer 1

I am facing a similar problem where the leading zero is clipped from my "text" input. When I call ngModel.$setViewValue("123.8900") , the text displayed on the input is "123.89" (the model is correctly set to zeros).

To solve this problem when the model is configured correctly, I call both:

 var value = "123.8900"; ngModel.$setViewValue(value); //updates model but trims zeros in the view inputEl[0].value = value; //prevents trimming of trailing zero but this alone wont update the model 

Answer 2

I am not keen on this solution - there is annoying flickering with this approach, and I am not particularly pleased with calling setTimeout, but it seems to work and avoids the annoying error of "this is not a number" Angular throws.

 angular.module('application', []) .directive('zeroPadded', function(){ return{ // limit to classes and attributes only // to use with CSS class, include "zeroPadded" in the class attribute // to use with attributes, add "zero-padded" to the input tag restrict: 'AC', link : function(scope, element){ function padZeroesElement(ele){ if(ele.value < 10){ ele.value = "0" + ele.value; } }; function padZeroes(event){ padZeroesElement(event.target); }; element.on('change', padZeroes); // hacky but not sure how else to ensure it zero-padded from the start setTimeout(function(){ for(var i = 0; i < element.length; i++){ padZeroesElement(element[i]); } }, 1000); } }; }); 

And then your actual input looks something like this:

 <input type="number" id="minute" ng-model="minute" min="0" max="59" step="1" zero-padded />