AngularJS - Build a custom validation directive for using multiple emails in textarea

AngularJS already supports the built-in validation with text input with type email. Something simple likes the following:

<input name="input" ng-model="email.text" required="" type="email" />
<span class="error" ng-show="myForm.input.$error.email">
        Not valid email!</span>

However, I used a text area and I wanted to enter some email addresses that's saparated by a comma (,). I had a short research and it looked like AngualarJS has not supported this functionality so far. Therefore, I needed to build a custom directive that I could add my own validation functions. My validation was done only on client side, so I used the $validators object.

Note that, there is the $asyncValidators object which handles asynchronous validation, such as making an $http request to the backend.

This is just my implementation on my project. In order to understand that, I supposed you already had experiences with AngularJS and you can catch my point here.

Html code

<textarea rows="3" class="form-control"
 id="dnNoticeInterfaceOtherEmail" name="dnNoticeInterfaceOtherEmail" 
 ng-model='noticeInterface.email.toAddress' ng-maxlength="500" ng-required="true"
 ng-init="dnNoticeInterfaceDialogForm.dnNoticeInterfaceOtherCCEmail.$validate()"
 dn-multiple-email-validator>
</textarea>

<div ng-messages="dnNoticeInterfaceDialogForm.dnNoticeInterfaceOtherEmail.$error" ng-show="dnNoticeInterfaceDialogForm.$submitted" role="alert">
 <div class="alert alert-danger" ng-message="required">
  This field is required.
 </div>
 <div class="alert alert-danger" ng-message="maxlength">
  This field only is allowed up to 500 characters
 </div>
 
 <div class="alert alert-danger" ng-message="dnMultipleEmailValidator">
  This field required a valid email format
 </div>
</div>

Javascript code

//DIRECTIVE FOR NAME MULTIPLE EMAILS
angular.module("dnStandard").directive("dnMultipleEmailValidator", dnMultipleEmailValidatorImpl);
function dnMultipleEmailValidatorImpl() {
 return {
  require: 'ngModel',
  link: dnMultipleEmailValidatorLinkImpl
 };
};

function dnMultipleEmailValidatorLinkImpl(scope, element,  attributes, controller) {
  controller.$validators.dnMultipleEmailValidator = function(modelValue, viewValue) {
   var errorFlag = true;
   if (!controller.$isEmpty(viewValue)) {
   var emailIdsArr = viewValue.split(/,|;/g);
       angular.forEach( emailIdsArr, function( value, key ) {
         if (!dnPattern.EMAIL_PATTERN.test(value.trim())) {
            errorFlag = false;
         }
       });
  }
    return errorFlag;
  };
}

dnPattern.EMAIL_PATTERN =  /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/

References:
[1]. https://docs.angularjs.org/api/ng/input/input%5Bemail%5D
[2]. http://www.treselle.com/blog/angularjs-directives/
[3]. https://docs.angularjs.org/guide/forms