Regex problems with angularjs

Question

I am trying to use a regular expression to validate an email address. It does not seem to be doing any validation at all. When I load the page the Submit button is disabled because of the $pristine but as soon as I type a letter the button becomes enabled. Also I am aware that the regex is only accepting upper-case at the moment. The following code is my form:

<form name="myForm" ng-hide="email" >

Insert Email :    <br/>

<input type="text" name="email" ng-pattern="/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]
{2,4}$/" ng-model="insert_email"  required> 

<br/>  
<button ng-hide="email" 
type="submit"  
ng-disabled="myForm.email.$pristine || myForm.email.$invalid">Submit</button>  

</form>

I am not sure but I think the problem may lie with the regex itself.

check this if it can help you http://stackoverflow.com/questions/24490668/how-to-validate-email-id-in-angularjs-using-ng-pattern — Jaiff, Nov 21 '14 at 16:44
I tried your code and it does not activate submit button when I enter some text. Can you create a demo for this? — kubuntu, Nov 21 '14 at 16:46

score 0 · Answer 1 · answered Nov 21 '14 at 18:41

0

take out the email in myForm.email.$pristine and in myForm.email.$invalid to look like:

 myForm.$pristine

and

 myForm.$invalid

also try with ng-required instead of required

answered Nov 21 '14 at 18:41

Santiago Rebella

2,399
2
22
29

score 0 · Answer 2 · answered Nov 21 '14 at 19:37

It seems to be two things. It looks like the ng-pattern expects an expression instead of a string attribute.

So you need to wrap it in a string if you want to use an inline expression.

Like so:

ng-pattern="'^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,4}$'"

Also, there seems to be some issues with your regex. I changed it to this:

ng-pattern="'^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$'"

It seems to work.

Plunker Demo

Regex problems with angularjs

2 Answers2