AngularJS Text – Allow Numeric Only

1 Min Read 285 Views
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.

<div class="panel panel-primary">  
      <div class="panel-heading">  
        <h3 class="panel-title">AngularJS Text Allow Numeric Only</h3>  
      </div>  
      <div class="panel-body">  
       <input type="text"   
            class="form-control"  
            ng-model="TextValues" />  
      </div>  
      <div class="panel-footer">  
    {{TextValues}}  
    </div>  
    </div>

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.

<html ng-app="'csharpcor'" ng-controller="NgCtrl">

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" />

 

Tags: