How to use regular expression in angularjs

Question

I have tried this code..

<script>
  angular.module('emailExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.text = '[email protected]';
    }]);
</script>
  <form name="myForm" ng-controller="ExampleController">
    Email: <input type="email" name="input" ng-model="text" required>
    <span class="error" ng-show="myForm.input.$error.required">
      Required!</span>
    <span class="error" ng-show="myForm.input.$error.email">
      Not valid email!</span>
    <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>

But getting issue in validation. Say if i try to enter '[email protected]' in email then it will not show any error. Please help me on this.

That is correct as per angular email validation..use ng-pattern for making it more precise — Pankaj Parkar
– Pankaj Parkar, Commented Dec 27, 2014 at 5:29

Nitsan Baleli · Accepted Answer · 2016-02-03 21:48:54Z

8

I am thinking why you are not using ng-pattern for this. You can make a regular expression and put inside ng-pattern.

Example:

<form name="signupFrm">

    <input type="email", ng-pattern="emailPattern">

</form>

or,

HTML:

    <div ng-class="{'has-error': signupFrm.email.$dirty && signupFrm.email.$invalid}">
        <input type="email" placeholder="Email" name="email" ng-pattern="emailPattern" required="required">
        <div ng-show="signupFrm.email.$dirty && signupFrm.email.$invalid || signupFrm.email.$error.pattern">
           <span ng-show="signupFrm.email.$error.pattern && signupFrm.email.$invalid " class="help-block"> should look like an email address</span>
           <span ng-show=" signupFrm.email.$error.required" class="help-block">can't be blank</span>
       </div> 
  </div>

JS:

$scope.emailPattern = /^([a-zA-Z0-9])+([a-zA-Z0-9._%+-])+@([a-zA-Z0-9_.-])+\.(([a-zA-Z]){2,6})$/;

edited Feb 3, 2016 at 21:48

Nitsan Baleli

5,4683 gold badges35 silver badges54 bronze badges

answered Dec 27, 2014 at 5:54

Ved

12.1k5 gold badges46 silver badges61 bronze badges

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

1 Comment

Anil Kumar Over a year ago

I have tried this but didn't work <script type="text/javascript" src="js/ang.js"></script> <script type="text/javascript"> function Ctrl($scope) { $scope.text = 'enter email'; $scope.word = /^[a-z]+[a-z0-9._]+@[a-z]+\.[a-z.]{2,5}$/; } </script> </head> <body> <form name="myform" ng-controller="Ctrl"> <input type="text" ng-pattern="word" name="email"> <span class="error" ng-show="myform.email.$error.pattern"> invalid email! </span> <input type="submit" value="submit"> </form> </body>

Collectives™ on Stack Overflow

How to use regular expression in angularjs

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related