AngularJS - How to put number 0 if input isn't numeric

Question

I wish there was TryParse but I guess there isn't in AngularJS. I tried to use angular.isNumber(). What I want my program to do: to replace any not numeric input with number 0. What it actually does: input box ignores anything which is not numeric by not allowing to write it down.

<script>
    var app = angular.module('BindingsApp', []);

    app.controller('InputCtrl', function($scope) {
        $scope.num3 = 0;
        $scope.edit = function () {

            $scope.num1 = parseInt($scope.num1);
            $scope.num2 = parseInt($scope.num2);

            function isNumeric(num) {
                return !isNaN(num);
            }

            if (!angular.isNumber($scope.num1) ) {
                $scope.num1 = 0;
            }

            if (!angular.isNumber($scope.num2) ) {
                $scope.num2 = 0;
            }

            $scope.num3 = $scope.num1 + $scope.num2;
        };
    });
</script>

<input type="text" ng-model="num1" ng-change="edit()" value="isNumeric(num1)" />
<br />
<input type="text" ng-model="num2" ng-change="edit()" value="{{num2}}" />
<br />
<input type="text" ng-model="num3" ng-change="edit()" value="{{num3}}" />
<br />

Sajeetharan · Accepted Answer · 2016-10-30 11:01:03Z

1

Easy way is to replace

<input type="text" ng-model="num1" ng-change="edit()" value="isNumeric(num1)" />
<br />

To

<input type="number" ng-model="num1" ng-change="edit()" />
<br />

type="number" which will allow only numeric values.No need to write any extra code

EDIT: Inorder to replace non-numeric values to 0 and allow numeric values, here is a directive

app.directive('productionQty', function() {
  return {
    require: 'ngModel',
    link: function (scope, element, attr, ngModelCtrl) {
      function fromUser(text) {
        var transformedInput = text.replace(/[^0-9]/g, '0');
        console.log(transformedInput);
        if(transformedInput !== text) {
            ngModelCtrl.$setViewValue(transformedInput);
            ngModelCtrl.$render();
        }
        return transformedInput;
      }
      ngModelCtrl.$parsers.push(fromUser);
    }
  }; 
});

DEMO

edited Oct 30, 2016 at 11:01

answered Oct 30, 2016 at 10:30

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

2 Comments

tomersss2 Over a year ago

Thanks, it's a school task and i was directed not to use the type="number" but to solve it with Angular.JS only :-\ (it's also doesn't replace any not numeric input to 0, so it still doesn't answer my needs anyway)

Sajeetharan Over a year ago

@LifeLess check the demo

Neel · Accepted Answer · 2016-10-30 13:51:22Z

This should do the trick :

app.controller('InputCtrl', function($scope) {
    $scope.num3 = 0;
    $scope.edit = function () {

        function isNumeric(num) {
            return !isNaN(num);
        }

        if (NaN($scope.num1) ) {
            $scope.num1 = 0;
        }else{
           $scope.num1 = parseInt($scope.num1);
        }

        if (NaN($scope.num2) ) {
            $scope.num2 = 0;
         }
        else{
            $scope.num2 = parseInt($scope.num2);
        }

        $scope.num3 = $scope.num1 + $scope.num2;
    };
});

If you parseInt non numeric character it will set the value to NaN ,so its better not to parse unless you are sure it'a a number. Also for some reason angular.isNumber was considering numeric value of $scope.num1 as not a number.Which is silly.So i replaced it with NaN.Hope this works. I haven't validated with special characters ,so plz check that.

Collectives™ on Stack Overflow

AngularJS - How to put number 0 if input isn't numeric

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related