Showing error message for invalid input

Question

I want to show error message when user enter invalid input in text field.

Right now I am using:

Pin:<input type="text" class="form-control input-sm" ng-pattern="numOnlyRegex" name="pin" ng-model="pin" required placeholder="Pin"/>
<span style="color:red" ng-show="myForm.pin.$invalid">Only number are allowed</span>
<input type="Submit" class="form-control btn btn-success" ng-disabled="myForm.$invalid" value="Submit" />

Controller:

<script>
            angular.module('myApp', []).controller("numOnlyRegex", function ($scope)
            {
                $scope.numOnlyRegex = /^\d+$/;
            });
        </script>

But the above way I am trying shows a static message below the input text-field. What I want is when the user enters letters instead of numbers it should show error message like "only numbers are allowed" else there it should not show any error message.

ng-show method shows static message when the input is empty but I want to show error only when there is error(more realistic way)

Do you want error message to show ONLY when user enters a wrong input(not when the input field is empty ?) — nalinc, Jun 12 '15 at 07:58
Done.. Here's the [plunkr](http://plnkr.co/edit/taYmWHzGHf6uVEfYKn5Q?p=preview) — nalinc, Jun 12 '15 at 08:05

nalinc · Answer 1 · 2015-06-12T08:19:38.110

5

You may use the $error.pattern on your form to display specific error message

<span style="color:red" ng-show="myForm.pin.$error.pattern">Invalid Input</span>

Following are some other examples of $error

myForm.useremail.$error.email ==true 
   // When useremail field does not contain a real email.
myForm.username.$error.require ==true
   // Only if the username field is left blank.

Here's the plunkr

edited Jun 12 '15 at 08:19

answered Jun 12 '15 at 08:04

nalinc

7,375
24
33

1

When I use $error.pattern, it means I need to have a pattern declared in the controller? – kittu Jun 12 '15 at 08:06
1

Not necessarily. You just to use `ng-pattern` in one of your form elements. You may provide your regex there itself(instead of writing in controller). Like `` – nalinc Jun 12 '15 at 08:11
So if I want to restrict white spaces like this: `ng-pattern="^\d+$/|/[^\s*]/"` then I have include this regex in each and every input line tag? – kittu Jun 12 '15 at 08:13
Can't I have a global regex which removes white spaces in all the input text-fields? – kittu Jun 12 '15 at 08:14
1

This `myForm.$error.pattern` isn't correct, because it is a global form pattern error, it is not specific for that input – devqon Jun 12 '15 at 08:17
@kittu, yes. I presume by saying `global`, you mean controller specific regex. No need to include regex in each and every input line tag. – nalinc Jun 12 '15 at 08:18
For say, I tried this: `First name: First name cannot be less than 3 letters` and the`$error.pattern` I applied here is specific to this line right? Or I have apply it on opening of form tag to make it global? and By the way `$error.pattern` I applied on firstname input field is not working – kittu Jun 12 '15 at 08:23
@kittu: As I mentioned in one of the previous comment, `$error.pattern` is error handler for `ng-pattern` only. If you want to use it with name valudation, use `$error.minlength`. Here's the updated [plunkr](http://plnkr.co/edit/taYmWHzGHf6uVEfYKn5Q?p=preview) – nalinc Jun 12 '15 at 09:15

score 2 · Answer 2 · answered Jun 12 '15 at 07:56

2

Angular allows you to target specific errors. In this case you can use the invalid pattern error:

<span style="color:red" ng-show="myForm.pin.$error.pattern">Only number are allowed</span>

This way it will only show when the error is on the pattern validation.

See this JSFIDDLE

answered Jun 12 '15 at 07:56

devqon

13,818
2
30
45

If I want to put restrictions on multiple input fields then do I have to have multiple controllers with regex patterns? – kittu Jun 12 '15 at 08:11
2

If you need to apply the pattern to multiple inputs on different views, you should create a directive for that, which can be reused every time – devqon Jun 12 '15 at 08:16
The error pattern for the first name isn't working. Created a plunkr http://plnkr.co/edit/ywsZPrAtCv0cEak4Tocy?p=preview – kittu Jun 12 '15 at 08:35
You haven't defined any `ng-pattern` on the firstname field – devqon Jun 12 '15 at 08:36
So for each and every field I have define a `ng-pattern`? – kittu Jun 12 '15 at 08:37
Can't I make it global to apply to all the fields? – kittu Jun 12 '15 at 08:38
No, and why would you? I don't see why you would use a num pattern on a first name? – devqon Jun 12 '15 at 08:39
You are mixing things. On the first name you want a check on the min-length, so you can use `ng-show="myForm.uname.$error.minlength"`. If you want to validate a `ng-pattern=""` then you target `$error.pattern`, for required you use `$error.required` and so on – devqon Jun 12 '15 at 08:40
No not number pattern. I mean to say "remove white space pattern" example: `ng-pattern="^\d+$/|/[^\s*]/"` and this is still not working on firstname. check the updated plunkr http://plnkr.co/edit/ywsZPrAtCv0cEak4Tocy?p=preview – kittu Jun 12 '15 at 08:42
But that's the requirement, I want to check for min length as well as remove white spaces along with showing error when invalid input is entered – kittu Jun 12 '15 at 08:58
So you don't want to validate on white spaces, but remove them. You should create a directive for that, like this one http://stackoverflow.com/a/14425022/3153169 – devqon Jun 12 '15 at 09:03
Validate or remove. I don't want the values getting saved in to database with white spaces at the start or in middle or in the end and also check for min length. Sorry to drag this – kittu Jun 12 '15 at 09:05
Yes some thing like that and I tried this for the firstname input: `ng-pattern="/^[a-zA-Z]{3,20}/"` but this one doesn't validate nor remove white spaces – kittu Jun 12 '15 at 09:17

score 0 · Answer 3 · answered Jul 06 '17 at 11:26

angular.module('myApp',[]).controller('myFormController',['$scope',function($scope){
  $scope.myInputVal='';
}])

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<html>
  <body ng-app="myApp">
  <div ng-controller="myFormController">
     <form name="myForm" >
     <input type="text" ng-model="myInputVal" ng-pattern="/^[0-9]*$/" name="myInputVal"/>
     <span ng-show="myForm.myInputVal.$error.pattern">Only Numbers are allowed</span>
     <span ng-show="!myForm.myInputVal.$error.pattern">{{myInputVal}}</span>
     <button type="submit" ng-disabled="myForm.$invalid">Submit</button>
     </form>
     </div>
  </body>

Showing error message for invalid input

3 Answers3