How to only allow the numbers 0-5 in <input> fields with AngularJS?

Question

I have an input field like this:

HTML

<input ng-model="newtodo.effort" ng-enter="addTodo()" type="number" min="0" max="5"
       maxlength="1" size="1" step="1" class="form-control marginBottom"
       placeholder="Aufwand" aria-describedby="basic-addon2" required></input>

JavaScript/Angular controller

$scope.addTodo(todo) {
    restservice.addTodo(todo); // Does call to REST service backend
}

In the input field above I only want to allow integer values 0, 1, 2, 3, 4 and 5.

Not allowed are floats (e.g. 1.4), characters (e.g. foo) and values less than 0 or bigger than 5.

The input field may not be empty!

As you can see I am already using HTML5 input attributes for this but I know that I cannot rely on those. Additionally I also check server-side if the values entered are valid against my restrictions. So far so good, but in order to increase usability and responsiveness of my web app I also want to validate these values in JavaScript using AngularJS. How would I do that? I know that I could implement complicated value checks in $scope.addTodo(todo) and then output error messages to the user if the values he/she entered weren't ok but I somehow "feel" that there is a better, easier "angularish" way using RegEx and a 1-liner? If so, please explain to me how to do this the Angular way. Thanks!

Nicklas Kevin Frank · Accepted Answer · 2015-07-19 12:47:12Z

2

You can add the following attribute to your input field.

ng-pattern="/^[0-5]+$/"

And validate as such:

function formCtrl($scope) {

}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="formCtrl">
  <form name="myForm">
    <input type="number" ng-model="newtodo.effort" name="effort" ng-pattern="/^[0-5]$/" ng-enter="addTodo()" step="1" class="form-control marginBottom" placeholder="Aufwand" aria-describedby="basic-addon2" required>
    <span ng-show="myForm.effort.$error.pattern">The number must be between 0-5</span>
    <span ng-show="myForm.effort.$error.number">No characters allowed</span>
    <span ng-show="myForm.effort.$error.required && !myForm.effort.$error.number">The field is required</span>
  </form>
</div>

edited Jul 19, 2015 at 12:47

answered Jul 19, 2015 at 12:05

Nicklas Kevin Frank

6,3574 gold badges41 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Timo Ernst Over a year ago

Thanks, but how can I output a helpful error message? For example, if the user entered 1.6 I want to show an error message, like this: <span class="errormsg">Float numbers are not allowed</span>. But if the user entered "foo" I want to show: <span class="errormsg">No text allowed here</span>

Nicklas Kevin Frank Over a year ago

I added a jsfiddle, showing exactly how you could do this.

Timo Ernst Over a year ago

Thanks, for that fiddle. That will only show a generic error message that the value the user entered doesn't match the pattern but isn't there a way to give a more detailed error message based on the input? E.g. "No characters allowed" if the user enters non-numbers or "Value to high" if he enters value 8 or "field is required" if he didn't enter anything at all?

nipuna-g · Accepted Answer · 2015-07-19 12:07:50Z

0

You can use ngPattern to set the regular expression which you want to validate against.

Reffer to the docs for more details: https://docs.angularjs.org/api/ng/directive/input

answered Jul 19, 2015 at 12:07

nipuna-g

6,7023 gold badges33 silver badges54 bronze badges

Collectives™ on Stack Overflow

How to only allow the numbers 0-5 in <input> fields with AngularJS?

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related