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.


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 class="panel-body">  
       <input type="text"   
            ng-model="TextValues" />  
      <div class="panel-footer">  

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) {



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) {




                return transformedInput;







Assgin a directive to the input text.

<input type="text"



     ng-model="TextValues" />


Thiruppathi Rengasamy
I'm a Dotnet Developer & Blogger. And also I'm working as a senior software engineer. I would like to spend my precious time writing articles, research on .Net technologies, and to learn new technologies.