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.

<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.