Email Input Tokenizer – AngularJS Directive

Standard

Introduction

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

Using the code

<body ng-app="tokenizer">
    <div ng-controller="tokenizerController">
        <tag-input taglist='email' placeholder="Emails"></tag-input>  
    </div>
</body>
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

emailtoken

For complete source code:

https://github.com/m-hassan-tariq/EmailInputTokenizerAngularJSDirective

Advertisements

One thought on “Email Input Tokenizer – AngularJS Directive

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s