Angular ng-pattern - not an email address

Question

I'm trying to verify that user input in a UserName field is NOT in the format of an email address, using ng-pattern with Angular. The following code seems to produce the results I want, however the page loads with the error message showing until the user begins typing. The error goes away unless the users input matches the email address regex. How can I hide that message on page load and only show it when the regex it matched? Thanks.

<div ng-show="!form.UserName.$error.pattern" class="errorMessage">
    Username is not your email address
</div>    

<div class=" form-group">
    <label class="form-label" for="userName">Username</label>
    <input class="form-control" ng-pattern="/^([a-zA-Z0-9])+([a-zA-Z0-9._%+-])+@([a-zA-Z0-9_.-])+\.(([a-zA-Z]){2,6})$/" />
</div>

Karim · Accepted Answer · 2017-04-26 21:17:57Z

1

try to check if the input is "touched"

<div ng-show="form.UserName.$error.pattern && form.UserName.$touched" class="errorMessage">
    Username is not your email address
</div>

answered Apr 26, 2017 at 21:17

Karim

8,6823 gold badges27 silver badges36 bronze badges

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

Collectives™ on Stack Overflow

Angular ng-pattern - not an email address

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related