leading zeros missing within number input

Question

I need to have displayed, within the number input field, the leading zeros on integers between 00-09. I am using angularJS.

View/template for the input field(sorry for the style within the 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 set of two input fields set a time value(hours and minutes) which is stored as a single value(which remains in the desired format(HH:MM = ex=> 01:07)). The ng-model values($scope.timeHH & $scope.timeMM) dont hold the leading zeros within the input field.

I found an answer to this issue but I am not able to get it to work. This is the (Answer).

Here is the ode for the directive. It is not triggering on blur nor giving errors. Can anyone see structure or syntax issues?

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(catches on blur event on the input field and avoids leading zero trim)(placed under my controller for the 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'm not fond of this solution - there's an annoying flicker with this approach, and I'm especially not pleased with the setTimeout call - but it seems to work, and avoids the annoying "that's not a number" error 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's 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 />

Answer 2

I'm encountering a similar issue, where leading zero's are being trimmed from my "text" input. When I call ngModel.$setViewValue("123.8900") the text displayed in the input is "123.89" (the model is correctly set with zeros).

To solve this issue while still correctly setting the model, 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