2

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!

Timo Ernst
  • 15,243
  • 23
  • 104
  • 165

2 Answers2

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>
Nicklas Kevin Frank
  • 6,079
  • 4
  • 38
  • 63
  • 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: `Float numbers are not allowed`. But if the user entered "foo" I want to show: `No text allowed here` – Timo Ernst Jul 19 '15 at 12:14
  • I added a jsfiddle, showing exactly how you could do this. – Nicklas Kevin Frank Jul 19 '15 at 12:31
  • 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? – Timo Ernst Jul 19 '15 at 12:40
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

nipuna-g
  • 6,252
  • 3
  • 31
  • 48