CODEWITHSUNDEEP
angularjsvalidation
noclist
noclist

Reputation: 1819

Angular ng-pattern - not an email address

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>

Upvotes: 0

Views: 568

Answers (1)

Karim
Karim

Reputation: 8652

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>

Upvotes: 1

Related Questions