How to validate email id in angularJs using ng-pattern

by

If you want to validate email then use input with type=”email” instead of type=”text”. AngularJS has email validation out of the box, so no need to use ng-pattern for this.

Here is the example from original documentation:

<script>
function Ctrl($scope) {
  $scope.text="[email protected]";
}
</script>
<form name="myForm" ng-controller="Ctrl">
  Email: <input type="email" name="input" ng-model="text" required>
  <br/>
  <span class="error" ng-show="myForm.input.$error.required">
    Required!</span>
  <span class="error" ng-show="myForm.input.$error.email">
    Not valid email!</span>
  <br>
  <tt>text = {{text}}</tt><br/>
  <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
  <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
  <tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
  <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
  <tt>myForm.$error.email = {{!!myForm.$error.email}}</tt><br/>
</form>

For more details read this doc: https://docs.angularjs.org/api/ng/input/input%5Bemail%5D

Live example: http://plnkr.co/edit/T2X02OhKSLBHskdS2uIM?p=info

UPD:

If you are not satisfied with built-in email validator and you want to use your custom RegExp pattern validation then ng-pattern directive can be applied and according to the documentation the error message can be displayed like this:

The validator sets the pattern error key if the ngModel.$viewValue
does not match a RegExp

<script>
function Ctrl($scope) {
  $scope.text="[email protected]";
  $scope.emailFormat = /^[a-z]+[a-z0-9._]+@[a-z]+\.[a-z.]{2,5}$/;
}
</script>
<form name="myForm" ng-controller="Ctrl">
  Email: <input type="email" name="input" ng-model="text" ng-pattern="emailFormat" required>
  <br/><br/>
  <span class="error" ng-show="myForm.input.$error.required">
    Required!
  </span><br/>
  <span class="error" ng-show="myForm.input.$error.pattern">
    Not valid email!
  </span>
  <br><br>
  <tt>text = {{text}}</tt><br/>
  <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
  <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
  <tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
  <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
  <tt>myForm.$error.pattern = {{!!myForm.$error.pattern}}</tt><br/>
</form>

Plunker: https://plnkr.co/edit/e4imaxX6rTF6jfWbp7mQ?p=preview

More Related Contents:

  1. How can I validate an email address using a regular expression?
  2. Validating email addresses using jQuery and regex
  3. Is regular expression recognition of an email address hard?
  4. AngularJS – Remove leading and trailing whitespace from input-box using regex
  5. Regex empty string or email
  6. Matching url with array list of words in AngularJS ui-router
  7. Phone number regular expressions exact format
  8. Greedy vs. Reluctant vs. Possessive Qualifiers
  9. RegEx: Grabbing values between quotation marks
  10. Regular Expression to match valid dates
  11. How to match numbers between X and Y with regexp?
  12. Regex for Comma delimited list
  13. Does a dot have to be escaped in a character class (square brackets) of a regular expression?
  14. What’s the regular expression that matches a square bracket?
  15. How does the regular expression ‘(?
  16. Regex AND operator
  17. How to match all text between two strings multiline
  18. Oracle 11g get all matched occurrences by a regular expression
  19. Preview Image before uploading Angularjs
  20. Unicode Regex; Invalid XML characters
  21. Short example of regular expression converted to a state machine?
  22. regex for preserving case pattern, capitalization
  23. RegEx No more than 2 identical consecutive characters and a-Z and 0-9
  24. validate natural input number with ngpattern
  25. How can I match double-quoted strings with escaped double-quote characters?
  26. Regular Expression for getting everything after last slash [duplicate]
  27. Regex: Get Filename Without Extension in One Shot?
  28. Replace first occurrence of “:” but not second in R
  29. Multiline Regex in PowerShell
  30. Powershell script to remove double quotes from CSV unless comma exists inside double quotes

Leave a Comment