CODEWITHSUNDEEP
javascriptangularjshtml
Sealer_05
Sealer_05

Reputation: 5566

Html5 input using Angular empty value 0

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');
            }
        });
    }
};

Upvotes: 2

Views: 3436

Answers (3)

Tomek Sułkowski
Tomek Sułkowski

Reputation: 7201

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>

Upvotes: 4

Sudhansu Choudhary
Sudhansu Choudhary

Reputation: 3360

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' }}

Upvotes: 0

AlphaG33k
AlphaG33k

Reputation: 1678

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

Upvotes: 1

Related Questions