How to create custom directive for email format in Angular JS

Question

I want to create directive for email format (i.e. all validation in the project).

First I have used below code

 <input type="email" class="form-control" name="UserName" ng-model="userDetail.UserName" placeholder="Enter email" ng-pattern="/^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/" required>

This working But I need to declare this "/^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/" in the whole project where used email address.

In future, I need to change pattern for email address. So, I need to find all email field in project after change every field pattern in the project. But My goal - How I can do this pattern global for the project.

I think, it is possible with custom directive.

So my question. How I can create directive for email pattern.

Mukund Thakkar · Accepted Answer · 2016-08-03 14:01:02Z

1

app.directive('validEmail', function () {
    return {
        require: 'ngModel',
        link: function (scope, element, attrs, control) {
            control.$parsers.push(function (viewValue) {
                var newEmail = control.$viewValue;
                control.$setValidity("invalidEmail", true);
                if (typeof newEmail === "object" || newEmail == "") return newEmail;  // pass through if we clicked date from popup
                if (!newEmail.match(/^(([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5}){1,25})+([;,.](([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5}){1,25})+)*$/))
                    control.$setValidity("invalidEmail", false);
                return viewValue;
            });
        }
    };
});

answered Aug 3, 2016 at 14:01

Mukund Thakkar

1,31514 silver badges24 bronze badges

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

Collectives™ on Stack Overflow

How to create custom directive for email format in Angular JS

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