Click here to Skip to main content
15,846,342 members
Articles / Programming Languages / Javascript
Tip/Trick

Email Input Tokenizer - AngularJS Directive

Rate me:
Please Sign up or sign in to vote.
5.00/5 (5 votes)
3 Apr 2015CPOL 10.2K   1   1
AngularJS directive for valid email tokenizer

Introduction

While implementing Single Page Application through WebAPI and AngularJS, you come across number of times to use filters and directives in order to meet requirements specified by clients. The below code snippet tokenizes input and displays them in a separate block within a specific placeholder, however it checks the input is a valid email address first and then the input token is not repetitive within the same placeholder.

Using the Code

HTML
<body ng-app="tokenizer">
    <div ng-controller="tokenizerController">
        <tag-input taglist='email' placeholder="Emails"></tag-input>  
    </div>
</body>
JavaScript
var sample = angular.module('tokenizer', ['ngRoute']);

sample.controller('tokenizerController', function ($scope) {
       
   });

   sample.directive('tagInput', function () {
       return {
           restrict: 'E',
           scope: {
               inputTags: '=taglist',
               autocomplete: '=autocomplete'
           },
           link: function ($scope, element, attrs) {
               $scope.defaultWidth = 200;
               $scope.tagText = '';
               $scope.placeholder = attrs.placeholder;
               $scope.tagArray = function () {
                   if ($scope.inputTags === undefined) {
                       return [];
                   }
                   return $scope.inputTags.split(',').filter(function (tag) {
                       return tag !== "";
                   });
               };
               $scope.addTag = function () {
                   var EMAIL_REGEXP = /^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+
					(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/;
                   var tagArray;
                   if ($scope.tagText.length === 0) {
                       return;
                   }
                   if (!EMAIL_REGEXP.test($scope.tagText)) {
                       return $scope.tagText = "";
                   }
                   tagArray = $scope.tagArray();
                   if (!(tagArray.indexOf($scope.tagText) >= 0)) {
                       tagArray.push($scope.tagText);
                       $scope.inputTags = tagArray.join(',');
                   }
                   return $scope.tagText = "";
               };
               $scope.deleteTag = function (key) {
                   var tagArray;
                   tagArray = $scope.tagArray();
                   if (tagArray.length > 0 && $scope.tagText.length === 0 && key === undefined) {
                       tagArray.pop();
                   } else {
                       if (key !== undefined) {
                           tagArray.splice(key, 1);
                       }
                   }
                   return $scope.inputTags = tagArray.join(',');
               };
               $scope.$watch('tagText', function (newVal, oldVal) {
                   var tempEl;
                   if (!(newVal === oldVal && newVal === undefined)) {
                       tempEl = $("<span>" + newVal + "</span>").appendTo("body");
                       $scope.inputWidth = tempEl.width() + 5;
                       if ($scope.inputWidth < $scope.defaultWidth) {
                           $scope.inputWidth = $scope.defaultWidth;
                       }
                       return tempEl.remove();
                   }
               });
               element.bind("keydown", function (e) {
                   var key;
                   key = e.which;
                   if (key === 9 || key === 13) {
                       e.preventDefault();
                   }
                   if (key === 8) {
                       return $scope.$apply('deleteTag()');
                   }
               });
               return element.bind("keyup", function (e) {
                   var key;
                   key = e.which;
                   if (key === 9 || key === 13 || key === 188) {
                       e.preventDefault();
                       return $scope.$apply('addTag()');
                   }
               });
           },
           template: "<div class='tag-input-ctn'><div class='input-tag' 
		data-ng-repeat=\"tag in tagArray()\">{{tag}}<div class='delete-tag' 
		data-ng-click='deleteTag($index)'>&times;</div></div><input type='text' 
		data-ng-style='{width: inputWidth}' data-ng-model='tagText' 
		placeholder='{{placeholder}}'/></div>"
       };
   });

Points of Interest

For the complete source code, please see https://github.com/m-hassan-tariq/EmailInputTokenizerAngularJSDirective.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer
United States United States
Five+ years of demonstrated work experience in developing and implementing business technology applications, systems integration and testing solutions with in-depth domain knowledge of industries like Healthcare, Telecom, Call Center, Financial Instruments, Payroll, HR, and skills including, but not limited to, software analysis, design and development.

Comprehensive understanding of NET Framework 4.5, 4.0, 2.0 and C#, ASP.Net, ADO.Net, Entity Framework, LINQ, Web Service, WCF, AJAX Control Toolkit, Advanced JavaScript, HTML 5.0, CSS3.0, jQuery, SSIS, SSRS, XML, XSLT, JSON.

Expertise in end to end development of enterprise web application and Single Page Application (SPA) using ASP.NET MVC, ASP.NET Web Forms, ASP.NET Web API, AngularJS, TypeScript, NodeJS, SQL Server and Design Pattern fanatic.

Comments and Discussions

 
GeneralMy vote of 5 Pin
Manoj Kumar Choubey23-Aug-16 7:41
professionalManoj Kumar Choubey23-Aug-16 7:41 
Nice Smile | :)

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.