<!DOCTYPE html>
<html>
<head>
<script data-require="underscore.js@*" data-semver="1.8.3" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
multiple emails:
<form role="form" ng-submit="onSubmit()" novalidate="" name="shareSelectionForm">
<div ng-class="{'has-error': shareSelectionForm.recipientEmail.$invalid}">
<textarea type="text" class="form-control" multiple-emails="" required="" name="recipientEmail" ng-model="shareSelectionFormFields.recipientEmail"></textarea>
</div>
</form>
</div>
</body>
</html>
var app = angular.module("myApp", []);
app.controller('myCtrl', ['$scope', function($scope){
}])
.directive('multipleEmails', function () {
return {
require: 'ngModel',
link: function(scope, element, attrs, ctrl) {
ctrl.$parsers.unshift(function(viewValue) {
var regExp = new RegExp('[,\\s]+');
var emails = _.compact(_.unique(viewValue.split(regExp)));
// define single email validator here
var re = /\S+@\S+\.\S+/;
// angular.foreach(emails, function() {
var validityArr = emails.map(function(str){
return re.test(str.trim());
}); // sample return is [true, true, true, false, false, false]
console.log(emails, validityArr);
var atLeastOneInvalid = false;
angular.forEach(validityArr, function(value) {
if(value === false)
atLeastOneInvalid = true;
});
if(!atLeastOneInvalid) {
// ^ all I need is to call the angular email checker here, I think.
ctrl.$setValidity('multipleEmails', true);
return viewValue;
} else {
ctrl.$setValidity('multipleEmails', false);
return undefined;
}
// })
});
}
};
});
/* Styles go here */
.has-error textarea {
background: red;
}