Angular ng-pattern regex not working

Question

I'm trying to create a validation for an angular input field which accepts only the a-zA-Z0-9 characters and special characters ".”(full stop), "_" (underscore), "@"(at sign)

I can't seem to get the hang of it.

I tried:

ng-pattern="/[a-zA-Z0-9_@.]+/"

requirement:

It can contain only alphabetic characters
it can contain alphabetic and numeric
It can contain alphabetic numeric and mentioned special characters
It cannot contain space

Well, that was information that was useful to put in the question. Along with an minimal reproducible example demonstrating the problem. — T.J. Crowder
– T.J. Crowder, Commented Sep 29, 2016 at 8:49
I notice that the documentation says not to use the g flag. — T.J. Crowder
– T.J. Crowder, Commented Sep 29, 2016 at 8:50
The documentation doesn't seem to show an example of an ng-pattern with regex that's not put in a string. But maybe you could test it anyway with ng-pattern=/^[a-zA-Z0-9_@.]+$/ ? — LukStorms
– LukStorms, Commented Sep 29, 2016 at 9:47
Works fine over here: plnkr.co/edit/lhkmD4UbR0aqEUofCUjD?p=preview — Jamie Barker
– Jamie Barker, Commented Sep 29, 2016 at 9:49

Steve Chambers · Accepted Answer · 2016-10-04 09:53:02Z

9

+25

The ng-pattern should be as follows:

ng-pattern="/^[a-zA-Z0-9_@.]+$/"

See demo here: http://plnkr.co/edit/ElBuuxGilBbC9fdA2n0P?p=preview

edited Oct 4, 2016 at 9:53

answered Oct 4, 2016 at 8:05

Steve Chambers

39.8k29 gold badges179 silver badges222 bronze badges

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

Comments

Aman Jaiswal · Accepted Answer · 2016-10-04 17:47:27Z

4

This will work for you.. ng-pattern= "/^[a-zA-Z0-9._@]+$/"

answered Oct 4, 2016 at 17:47

Aman Jaiswal

1,1333 gold badges18 silver badges36 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:16:42Z

3

Here are the "blocks" to write the final solution:

It can contain only alphabetic characters - Use ^[a-zA-Z]+$
it can contain alphabetic and numeric - Use ^[a-zA-Z0-9]+$
It can contain alphabetic numeric and mentioned special characters - Use ^[a-zA-Z0-9_@.]+$
It cannot contain space - Use ng-trim="false" (see this SO thread)

JS full demo:

var app = angular.module("app", []);

<html ng-app="app">

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

<body>
  <form name="form">
    <p>Enter text to validate:</p>
    <input type="text" ng-model="name" name="name" ng-pattern="/^[a-zA-Z0-9_@.]+$/" ng-trim="false" />
    <div ng-show="form.name.$error.pattern">Text doesn't match with ng-pattern!</div>
  </form>
</body>

</html>

edited May 23, 2017 at 12:16

CommunityBot

11 silver badge

answered Oct 4, 2016 at 20:47

Wiktor Stribiżew

631k41 gold badges502 silver badges632 bronze badges

Comments

Didexe · Accepted Answer · 2017-09-04 11:51:49Z

1

Just to add up to date information. If you use Angular4 it should be:

pattern="^[a-zA-Z0-9_@.]+$"

answered Sep 4, 2017 at 11:51

Didexe

1281 silver badge8 bronze badges

Collectives™ on Stack Overflow

Angular ng-pattern regex not working

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related