html5 number type to accept only positive integers

3
votes

I am using an angular app, with an html5 number type input. I am trying to restrict the input to only accepts positive integers and not decimal, floating point numbers.

I tried using some patterns and step=1 min, max values but does not seem to work.

Please suggest.

EDIT:

This is how my form looks like. Sorry for the confusion if I may have cause.

<div class="row bottom-spaced-small">
        <div class="col-md-3">
            Number*
        </div>
        <div class="col-md-9">
            <input name="txtNumber" ng-disabled="somevalue" min="1" step="1" type="number" ng-required="true" ng-maxlength="50" ng-model="someNumber" class="form-control color-black" />
        </div>
        <div class="row" style="padding-left: 30px" ng-if="someForm.$submitted && !someForm.txtNumber.$valid">
            <span style="color: red">Number is mandatory and must be a non 0 positive number.</span>
        </div>
    </div>
4
javascriptangularjshtml
Where can we find your code ? – Rayon
Can you provide a reproducible example? Simply setting min=1 works fine for me. – phihag
What browser do you use? – imkost
@phihag here is what I have in my form and this does not seem to work. <input name="txtNumber" ng-disabled="somevalue" min="1" step="1" type="number" ng-required="true" ng-maxlength="50" ng-model="someNumber" class="form-control color-black" /> – Immortal
@imkost I am using chrome, but need to support IE9, firefox. – Immortal

4 Answers

7
votes

You can set the min attribute, although check for support;

<input type="number" min="0" step="1">
2
votes

<input type="number" step="1" min="0">

type is the type of the input field, step defines the stepping of allowed numbers, i. e. only whole numbers are allowed, and finally setting min to zero means that negative numbers aren't allowed. Thusly only positive whole numbers (integers) and zero is allowed.

0
votes

Right Guys,

Thanks for posting some valid answers however my requirement was something else. Hence I decided to write my own directive to fix this issue.

'use strict';

(function () { var app = angular.module("common");

var onlyInteger = function () {
    return {
        restrict: "A",
        require: '?ngModel',
        link: function (scope, element, attrs, ctrl) {
            ctrl.$parsers.push(function (inputValue) {
                if (inputValue == undefined) return '';
                var transformedValue = inputValue.replace(/[^0-9]/g, '');                    
                if (transformedValue !== inputValue) {
                    ctrl.$setViewValue(transformedValue);
                    ctrl.$render();
                }

                return transformedValue;
            });
        }
    };
};

app.directive('onlyInteger', onlyInteger);
}());

<div class="row bottom-spaced-small">
        <div class="col-md-3">
            Number
        </div>
        <div class="col-md-9">
            <input name="txtNumber" only-integer ng-required="true" ng-maxlength="50" ng-model="someNumber" class="form-control color-black" />
        </div>
        <div class="row" style="padding-left: 30px" ng-if="someForm.$submitted && !someForm.txtNumber.$valid">
            <span style="color: red">Number is mandatory and must be a non 0 positive number.</span>
        </div>
    </div>

Two things here, I have removed the control as number type="number" and included the directive as attribute.

The pattern written in the control is pretty much bound and static. If we wish to be a bit more generic, then pass the pattern as an attribute and capture inside the directive to validate against that pattern.

Open to Suggestions and corrections.

0
votes

User 

<input type="number" onkeypress="return event.charCode >= 48" min="1" >