How can you limit the value from input using AngularJS?

Question

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

Answer 1

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

Answer 2

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