AngularJS Text - Allow Numeric Only

In this blog, I will demonstrate how to allow only numeric values in input textbox, using AngularJS. This technique is most useful for quantity and countable input text.

HTML Code I have designed a simple input type “Text” in HTML.using AngularJS.

AngularJS Code

Create an Angular module and name it as  "csharpcor".

var app = angular.module('csharpcor', []);

Create Angular Controller for initiating the value.

app.controller('NgCtrl', function($scope) {

  $scope.TextValues=123456789;

});

Module and Controller name must assign to the HTML element.

Create Angular directives as given below.

app.directive('numericonly', function () {

    return {

        require: 'ngModel',

        link: function (scope, element, attr, ngModelCtrl) {

            function fromUser(text) {

                var transformedInput = text.replace(/[^0-9]/g, '');

                if (transformedInput !== text) {

                    ngModelCtrl.$setViewValue(transformedInput);

                    ngModelCtrl.$render();

                }

                return transformedInput;

            }

            ngModelCtrl.$parsers.push(fromUser);

        }

    };

});

 

Assgin a directive to the input text.

<input type="text"

     numericonly

     class="form-control"

     ng-model="TextValues" />