This question already has answers here:
Text Input allow only Integer input in angularjs
(7 answers)
Closed 3 years ago.
I have the following input of type number:
<input class="number text-center" type="number" step="1"
ng-model="item.formattedQuantity"
ng-disabled="item.discount === '100.00'"
ng-change="change(item)"
ng-blur="blur(item)" min="0" />
What can I do to forbid users adding decimal values? I tried adding step=0.01 and ng-pattern="/^[0-9]+$/" but users could still place values like 1.5, 31.56, etc.
What can I do?
You need to create a directive to achieve that.
app.directive('numericInput', function () {
return {
restrict: 'A',
link: function (scope, elm, attrs, ctrl) {
elm.on('input', function (event) {
var regex = RegExp('^[0-9]+$');
if(regex.test(event.target.value)){
event.preventDefault();
return true;
else {
event.preventDefault(); return false;
}
});
}
}
});
Or you can try the angularjs style (found codepen here)
app.directive('numericInput', function () {
return {
require: 'ngModel',
link: function (scope, element, attr, ngModelCtrl) {
function fromUser(text) {
if (text) {
var transformedInput = text.replace(/[^0-9]/g, '');
if (transformedInput !== text) {
ngModelCtrl.$setViewValue(transformedInput);
ngModelCtrl.$render();
}
return transformedInput;
}
return undefined;
}
ngModelCtrl.$parsers.push(fromUser);
}
};
});
Then in your html
<input numeric-input class="number text-center" type="number" step="1"
ng-model="item.formattedQuantity"
ng-disabled="item.discount === '100.00'"
ng-change="change(item)" ng-blur="blur(item)" min="0" />
I would like to create directive for writing only numbers with decimal places. I have this code:
zpc. directive('onlyNumbers', function () {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, element, attrs, modelCtrl) {
modelCtrl.$parsers.push(function (inputValue) {
if (inputValue == undefined) return '';
var transformedInput = inputValue.replace(/^[0-9](,[0-9]{0,2})?/g, '');
if (transformedInput !== inputValue) {
modelCtrl.$setViewValue(transformedInput);
modelCtrl.$render();
}
return transformedInput;
});
}
};
});
I can write numbers with decimal places but other characters too.
Thanks for advices
angular.directive('decimalPlaces',function(){
return {
link:function(scope,ele,attrs){
ele.bind('keypress',function(e){
var newVal=$(this).val()+(e.charCode!==0?String.fromCharCode(e.charCode):'');
if($(this).val().search(/(.*)\.[0-9][0-9]/)===0 && newVal.length>$(this).val().length){
e.preventDefault();
}
});
}
};
});
<input type="number" step="0.01" ng-model='somemodel' decimal-places>
You can also used https://www.npmjs.com/package/angular-input-masks.
Hopefully this will help.
use ng-pattern directive, set regular expression.
<input type="text" ng-model="onlyNumbers" ng-pattern="/^[0-9]+\.?[0-9]*$/">
How to disable special characters in angular js input tag. Only allow alphanumeric
just like we use
<input type="text" ng-trim="false" style="text-transform: uppercase" ng-pattern="/^[a-zA-Z0-9]*$/" class="form-text" id="pan_card_number" name="pan_card_number" ng-minlength="10" maxlength="10" required ng-model="registration.newTSP.panCardNumber">
you can use Regex with Ng-pattern and Display the message through ng-message
$scope.useOnlySpecialCharacters = /^[a-zA-Z0-9]*$/;
<input type="text" ng-model="specialcharacters"
ng-pattern="useOnlySpecialCharacters" />
show message through ng-message
<div ng-message="pattern"> Please Enter AlphaNumeric </div>
OR
Best Option is to use Directives
app.directive('noSpecialChar', function () {
return {
require: 'ngModel',
restrict: 'A',
link: function (scope, element, attrs, modelCtrl) {
modelCtrl.$parsers.push(function (inputValue) {
if (inputValue == null) {
return '';
}
var cleanInputValue = inputValue.replace(/[^\w\s]/gi, '');
if (cleanInputValue != inputValue) {
modelCtrl.$setViewValue(cleanInputValue);
modelCtrl.$render();
}
return cleanInputValue;
});
}
}
});
LINK
use ng-pattern="/[A-Z]{5}\d{4}[A-Z]{1}/i" in your HTML input tag
use the following
Controller
$scope.panCardRegex = '/[A-Z]{5}\d{4}[A-Z]{1}/i';
HTML
<input type="text" ng-model="abc" ng-pattern="panCardRegex" />
Use Directives to restrict Special characters:
angular.module('scPatternExample', [])
.controller('scController', ['$scope', function($scope) {
}])
.directive('restrictSpecialCharactersDirective', function() {
function link(scope, elem, attrs, ngModel) {
ngModel.$parsers.push(function(viewValue) {
var reg = /^[a-zA-Z0-9]*$/;
if (viewValue.match(reg)) {
return viewValue;
}
var transformedValue = ngModel.$modelValue;
ngModel.$setViewValue(transformedValue);
ngModel.$render();
return transformedValue;
});
}
return {
restrict: 'A',
require: 'ngModel',
link: link
};
});
<input type="text" ng-model="coupon.code" restrict-Special-Characters-Directive>
set pattern to allow only alphanumeric
/^[a-z0-9]+$/i
I have a directive, it's validate the input number and allow you to input a number in such format: 0000.00000
Everything works fine but only in Chrome. When I open Mozilla it eats my comma. I've tried to use ng-trim, but it doesn't work. Does anybody had such a problem?
My Directive with validation rule:
.directive('float', function() {
var isValid = function(str) {
// return true;
var regex = /^(?:[1-9]\d*|0)?(?:(\.|,)\d{1,5})?$/;
return regex.test(str);
};
return {
require: 'ngModel',
link: function(scope, elm, attrs, ngModelCtrl) {
ngModelCtrl.$parsers.unshift(function(viewValue) {
var validate = isValid(viewValue);
ngModelCtrl.$setValidity('float', validate);
return validate ? parseFloat(viewValue.replace(',', '.')) : null;
});
elm.bind('keyup change', function() {
if (angular.isFunction(ngModelCtrl.$viewValue.replace)) {
ngModelCtrl.$setViewValue(ngModelCtrl.$viewValue.replace(/[^\d{0,16}(.|,)]/g, ""));
ngModelCtrl.$render();
scope.$apply();
}
});
}
};
});
This is my input field:
<label class="control-label">Amount min</label>
<div class="controls">
<input
type="number"
step="any"
min="0"
ng-model="form.amount_min"
float
name="amount_min"
minmax='{"name": "amount_max", "order": "minimum"}'
validerror="{name: 'amount_min'}"
ng-trim="false">
</div>
I am looking for ways to limit the value inside the input to 4 and process the 4 digit value unto my controller.
<input type="number" class="form-control input-lg"
ng-model="search.main" placeholder="enter first 4 digits: 09XX">
{{ search.main | limitTo:4}}
Can always make a directive for it:
app.directive("limitTo", [function() {
return {
restrict: "A",
link: function(scope, elem, attrs) {
var limit = parseInt(attrs.limitTo);
angular.element(elem).on("keypress", function(e) {
if (this.value.length == limit) e.preventDefault();
});
}
}
}]);
<input limit-to="4" type="number" class="form-control input-lg" ng-model="search.main" placeholder="enter first 4 digits: 09XX">
You can always use ng-minlength, ng-maxlength for string length and min, max for number limits. Try this
<input type="number"
name="input"
class="form-control input-lg"
ng-model="search.main"
placeholder="enter first 4 digits: 09XX"
ng-minlength="1"
ng-maxlength="4"
min="1"
max="9999">
DEMO FIDDLE
No need to use an AngularJS directive.
Just use the good old standard html attribute maxlength.
<input type="text" maxlength="30" />
I used the accepted answer as a launching point, but this is what I came up with.
angular.module('beastTimerApp')
.directive('awLimitLength', function () {
return {
restrict: "A",
require: 'ngModel',
link: function (scope, element, attrs, ngModel) {
attrs.$set("ngTrim", "false");
var limitLength = parseInt(attrs.awLimitLength, 10);// console.log(attrs);
scope.$watch(attrs.ngModel, function(newValue) {
if(ngModel.$viewValue.length>limitLength){
ngModel.$setViewValue( ngModel.$viewValue.substring(0, limitLength ) );
ngModel.$render();
}
});
}
};
});
usage
<input name="name" type="text" ng-model="nameVar" aw-limit-length="10"/>
The key is to use $setViewValue() and $render() to set and display the changes respectively. This will make sure $viewValue and $modelValue are correct and displayed properly. You also want to set ngTrim to false to prevent the user adding whitespaces beyond the limit. This answer is an amalgamation of #tymeJV's answer and this blog post... https://justforchangesake.wordpress.com/2015/01/10/useful-angularjs-directives/
Will do it allowing backspaces and deletes.
app.directive("limitTo", [function() {
return {
restrict: "A",
link: function(scope, elem, attrs) {
var limit = parseInt(attrs.limitTo);
angular.element(elem).on("keydown", function() {
if(event.keyCode > 47 && event.keyCode < 127) {
if (this.value.length == limit)
return false;
}
});
}
}
}]);
you can use this code:
<input type="number" class="form-control input-lg"
ng-model="search.main"
ng-keypress="limitKeypress($event,search.main,4)"
placeholder="enter first 4 digits: 09XX">
and AngularJS code:
$scope.limitKeypress = function ($event, value, maxLength) {
if (value != undefined && value.toString().length >= maxLength) {
$event.preventDefault();
}
}
We can use ng-value instead:
ng-value="(minutes > 60 ? minutes = 0 : minutes)"
In html code:
<input type="text" class="form-control" ng-model="minutes" ng-maxlength="2" ng-pattern="/^[0-9]*$/" ng-value="(minutes > 60 ? minutes = 0 : minutes)"/>
This will check for the value and if it is greater than 60, it replaces the value with 0.
As there is a problem in above directive (answer of tymeJV). If you enter maximum length once, then it will not accept any other character even the backspace. That is if limit-to="4" and if you entered 4 character in input box, then you will not able to delete it. SO here is the updated answer.
app.directive("limitTo", [function () {
return {
restrict: "A",
link: function (scope, elem, attrs) {
var limit = parseInt(attrs.limitTo);
elem.bind('keypress', function (e) {
// console.log(e.charCode)
if (elem[0].value.length >= limit) {
console.log(e.charCode)
e.preventDefault();
return false;
}
});
}
}
}]);
Angular material has a directive mdMaxlength, if you want to cut off the input at this length, you can use this directive:
app.directive("forceMaxlength", [function() {
return {
restrict: "A",
link: function(scope, elem, attrs) {
var limit = parseInt(attrs.mdMaxlength);
angular.element(elem).on("keydown", function() {
if (this.value.length >= limit) {
this.value = this.value.substr(0,limit-1);
return false;
}
});
}
}
}]);
Usage:
<input type="text" md-maxlength="30" force-maxlength=""/>
We can write the directive to listen to the keypress event. But for some old browsers, this event is not triggered. Thats why i created a directive in such a way that there's no dependency on browser specific events limitation.
I created an angular directive to limit the number of text in the input box.
'use strict';
angular.module("appName")
.directive("limitTo", [function() {
return {
restrict: "A",
require: "ngModel",
link: function(scope, elem, attrs, ctrl) {
var limit = parseInt(attrs.limitTo);
ctrl.$parsers.push(function (value) {
if (value.length > limit){
value = value.substr(0, limit);
ctrl.$setViewValue(value);
ctrl.$render();
}
return value;
});
}
}}]);
Usage: <input limit-to="3" ng-model="test"/> would allow only 3 characters in input box.
In Angular Js Material we can limit input field by "maxLimit", for example we need limit of input text should b 60 character as:
maxLimit ='60'
complete code:
<form-input-field flex
class="input-style-1"
title="Quick response tag title"
placeholder="Write a catchy title to help users get more information on the service card"
form-name="parent.qrtForm"
show-error="showError"
name="title"
maxLength="65"
text-limit="65"
required="true"
ng-model="newQrt.tagName">
Run this operation on any change to the number:
var log = Math.log(number) / Math.log(10);
if (log >= 4)
number = Math.floor(number / Math.pow(10, Math.ceil(log - 4)));
This will always limit "number" to 4 digits.
I am reiterating what #Danilo Kobold said.
I had to make sure that users can enter only numbers (0-9) [Without 'e' or '.' or '-'] and a limit of 4 values only.
app.directive("limitTo", [function() {
return {
restrict: "A",
link: function(scope, elem, attrs) {
var limit = parseInt(attrs.limitTo);
var exclude = /Backspace|Enter/;
angular.element(elem).on("keydown", function(e) {
if (event.keyCode > 47 && event.keyCode < 58) {
if (this.value.length == limit) e.preventDefault();
} else if (!exclude.test(event.key)) {
e.preventDefault();
}
});
}
}
}]);
If you want to use only limit then use
app.directive("limitTo", [function() {
return {
restrict: "A",
link: function(scope, elem, attrs) {
var limit = parseInt(attrs.limitTo);
var exclude = /Backspace|Enter/;
angular.element(elem).on("keydown", function(e) {
if (!exclude.test(event.key)) {
if (this.value.length == limit) e.preventDefault();
}
});
}
}
}]);
You can add more keys if you want to the exclude variable, like this:
var exclude = /Backspace|Enter|Tab|Delete|Del|ArrowUp|Up|ArrowDown|Down|ArrowLeft|Left|ArrowRight|Right/;
Got idea from this post
Hope I helped someone.
You can just use
ui-mask="9999"
as attribute in your view.
**
app.directive("limitTo", [function() {
return {
restrict: "A",
link: function(scope, elem, attrs) {
var limit = parseInt(attrs.limitTo);
var exclude = /Backspace|Enter/;
angular.element(elem).on("keydown", function(e) {
if (e.keyCode > 47 && e.keyCode < 58) {
if (this.value.length == limit) e.preventDefault();
} else if (!exclude.test(e.key)) {
e.preventDefault();
}
});
}
}
}]);
**
Use this directive if you want to restrict max length for a input field which is present as part of custom directive template. This is the native html5 way of restricting max-lenth. This will also handle the copy paste case also to restrict till the maxlength on pasting.
app.directive('inputWrapper', function() {
return {
restrict: 'A',
template: "<input type='text'/>"
};
});
app.directive('maxInputLength', function() {
return {
restrict: 'A',
link: function(scope, elem, attrs) {
var limit = parseInt(attrs.maxInputLength);
angular.element(elem).find('input').attr('maxlength', limit);
}
};
});
<input-wrapper max-input-lenth="35"></input-wrapper>
Do this instead
<input type="text" class="form-control input-lg" ng-model="search.main" placeholder="enter first 4 digits: 09XX" maxlength="4" num-only>{{ search.main | limitTo:4}}
use the type "text", then use maxlength to limit it and also use the num-only option to make it number input only