Html5 input using Angular empty value 0

Question

If I have an input such as below. What is the cleanest way I can ensure the empty string (input) is always 0.00.

I was thinking it could be done with a watch but was wondering if there would be an easier way built into angular or html5 to handle it.

<input class="form-control" type="number" step="0.01" placeholder="$" 
                                           data-ng-model="status.approved.price" />

Edit: What I actually needed was blur which handles clicking out of input as well as tabbing out. Tomek Sułkowski helped me get to this solution as you can see in this directive. Once the user leaves the input it will default to 0 if there is no value.

return {
    restrict: 'A',
    require: 'ngModel',
    link: function (scope, elem, attrs, ngModelCtrl) {
        elem.on('blur', function() {
            if (!elem.val()) {
                elem.val('0');
                ngModelCtrl.$setViewValue('0');
            }
        });
    }
};

Tomek Sułkowski · Accepted Answer · 2015-06-28 10:06:29Z

4

Actually a better solution than setting a watch in a controller would be to create a directive that sets proper modelValue if viewValue is " " (space). It will be far more reusable, because if you'll have to use it in other places you won't need to write the same logic in each of those cases.

Mind that Angular trims input values by default. You need to turn it off on your input (hence the ng-trim="false").

Something like this:

angular.module('app', [])
.directive('myZeroable', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, elem, attrs, ngModelCtrl) {
            ngModelCtrl.$parsers.push(function (viewValue) {
                if (viewValue === ' ') {
                    return 0; // or '0.00' - depending on your requirements
                }
                return viewValue;
            });
        }
    };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<div ng-app="app">
  <label>Write a single space</label>
  <input ng-model="test" my-zeroable ng-trim="false" />
  <pre>Current model value is: {{ test | json }}</pre>
</div>

edited Jun 28, 2015 at 10:06

answered Jun 24, 2015 at 17:53

Tomek Sułkowski

7,2312 gold badges20 silver badges15 bronze badges

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

1 Comment

Tomek Sułkowski Over a year ago

Let us continue this discussion in chat.

AlphaG33k · Accepted Answer · 2015-06-24 18:03:26Z

1

The Jade markup:

main(ng-app="demo")
  input(type="text", ng-model="test", ng-controller="demo-controller" ng-change="setInitVal(test)") 
  {{ test }}

The angular code:

    "use strict";
    var demo = angular.module('demo',[]);

    demo.controller('demo-controller', function($scope){
      $scope.setInitVal = function(inputVal){

        if (!inputVal) {
            $scope.test = '0.00';
        }
      };
    });

Heres the demo: http://codepen.io/nicholasabrams/pen/EjbLpW

answered Jun 24, 2015 at 18:03

AlphaG33k

1,6781 gold badge13 silver badges25 bronze badges

Comments

Sudhansu Choudhary · Accepted Answer · 2015-06-24 18:15:27Z

0

This would work, {{ test != ""? test: '0.00' }}

your updated jade mark up would be,

main(ng-app="demo")
  input(type="text", ng-model="test", ng-controller="demo-controller" ng-change="setInitVal(test)") 
  {{ test != ""? test: '0.00' }}

answered Jun 24, 2015 at 18:15

Sudhansu Choudhary

3,3903 gold badges21 silver badges33 bronze badges

Collectives™ on Stack Overflow

Html5 input using Angular empty value 0

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related