feat(input): support multiple attribute for email

src/ng/directive/attrs.js

@@ -345,15 +345,17 @@ var ngAttributeAliasDirectives = {};
 
 // boolean attrs are evaluated
 forEach(BOOLEAN_ATTR, function(propName, attrName) {
-  // binding to multiple is not supported
-  if (propName == "multiple") return;
-
   var normalized = directiveNormalize('ng-' + attrName);
   ngAttributeAliasDirectives[normalized] = function() {
     return {
       restrict: 'A',
       priority: 100,
       link: function(scope, element, attr) {
+        // binding to multiple is not supported for select
+        if (propName === 'multiple' && nodeName_(element) === 'select') {
+          return;
+        }
+
         scope.$watch(attr[normalized], function ngBooleanAttrWatchAction(value) {
           attr.$set(attrName, !!value);
         });

src/ng/directive/input.js

@@ -902,6 +902,19 @@ function testFlags(validity, flags) {
   return false;
 }
 
+function multipleBasedInputType(ctrl, attr) {
+  var removeParserFormatter = angular.noop;
+  attr.$observe('multiple', function(val) {
+    if (val) {
+      removeParserFormatter = addListParserFormatter(ctrl, ', ', true);
+    } else {
+      removeParserFormatter();
+    }
+    ctrl.$$multiple = !!val;
+    ctrl.$validate();
+  });
+}
+
 function stringBasedInputType(ctrl) {
   ctrl.$formatters.push(function(value) {
     return ctrl.$isEmpty(value) ? value : value.toString();
@@ -1231,6 +1244,7 @@ function emailInputType(scope, element, attr, ctrl, $sniffer, $browser) {
   // in browsers, i.e. we can always read out input.value even if it is not valid!
   baseInputType(scope, element, attr, ctrl, $sniffer, $browser);
   stringBasedInputType(ctrl);
+  multipleBasedInputType(ctrl, attr);
 
   ctrl.$$parserName = 'email';
   ctrl.$validators.email = function(value) {
@@ -1936,11 +1950,21 @@ var NgModelController = ['$scope', '$exceptionHandler', '$attrs', '$element', '$
       validationDone(false);
       return;
     }
-    if (!processSyncValidators()) {
+    if (!runProcessor(processSyncValidators)) {
       validationDone(false);
       return;
     }
-    processAsyncValidators();
+    runProcessor(processAsyncValidators);
+
+    function runProcessor(fn) {
+      if (ctrl.$$multiple && isArray(modelValue)) {
+        return modelValue.reduce(function (result, value) {
+          return result && fn(value);
+        }, true);
+      } else {
+        return fn(modelValue);
+      }
+    }
 
     function processParseErrors(parseValid) {
       var errorKey = ctrl.$$parserName || 'parse';
@@ -1961,7 +1985,7 @@ var NgModelController = ['$scope', '$exceptionHandler', '$attrs', '$element', '$
       return true;
     }
 
-    function processSyncValidators() {
+    function processSyncValidators(modelValue) {
       var syncValidatorsValid = true;
       forEach(ctrl.$validators, function(validator, name) {
         var result = validator(modelValue, viewValue);
@@ -1977,7 +2001,7 @@ var NgModelController = ['$scope', '$exceptionHandler', '$attrs', '$element', '$
       return true;
     }
 
-    function processAsyncValidators() {
+    function processAsyncValidators(modelValue) {
       var validatorPromises = [];
       var allValid = true;
       forEach(ctrl.$asyncValidators, function(validator, name) {
@@ -2579,6 +2603,40 @@ var minlengthDirective = function() {
   };
 };
 
+function addListParserFormatter(ctrl, separator, trimValues) {
+  var trimmedSeparator = trimValues ? trim(separator) : separator;
+
+  var parse = function(viewValue) {
+    // If the viewValue is invalid (say required but empty) it will be `undefined`
+    if (isUndefined(viewValue)) return;
+
+    var list = [];
+
+    if (viewValue) {
+      forEach(viewValue.split(trimmedSeparator), function(value) {
+        if (value) list.push(trimValues ? trim(value) : value);
+      });
+    }
+
+    return list;
+  };
+
+  var format = function(value) {
+    if (isArray(value)) {
+      return value.join(separator);
+    }
+
+    return undefined;
+  };
+
+  ctrl.$parsers.push(parse);
+  ctrl.$formatters.push(format);
+
+  return function() {
+    arrayRemove(ctrl.$parsers, parse);
+    arrayRemove(ctrl.$formatters, format);
+  };
+}
 
 /**
  * @ngdoc directive
@@ -2672,31 +2730,7 @@ var ngListDirective = function() {
       // to access the ngList attribute, which doesn't pre-trim the attribute
       var ngList = element.attr(attr.$attr.ngList) || ', ';
       var trimValues = attr.ngTrim !== 'false';
-      var separator = trimValues ? trim(ngList) : ngList;
-
-      var parse = function(viewValue) {
-        // If the viewValue is invalid (say required but empty) it will be `undefined`
-        if (isUndefined(viewValue)) return;
-
-        var list = [];
-
-        if (viewValue) {
-          forEach(viewValue.split(separator), function(value) {
-            if (value) list.push(trimValues ? trim(value) : value);
-          });
-        }
-
-        return list;
-      };
-
-      ctrl.$parsers.push(parse);
-      ctrl.$formatters.push(function(value) {
-        if (isArray(value)) {
-          return value.join(ngList);
-        }
-
-        return undefined;
-      });
+      addListParserFormatter(ctrl, ngList, trimValues);
 
       // Override the standard $isEmpty because an empty array means the input is empty.
       ctrl.$isEmpty = function(value) {

test/ng/directive/inputSpec.js

@@ -3765,6 +3765,51 @@ describe('input', function() {
       expect(widget.$error.email).toBeTruthy();
     });
 
+    it('should validate multiple e-mail', function() {
+      compileInput('<input type="email" multiple ng-model="email" name="alias" />');
+
+      var widget = scope.form.alias;
+
+      changeInputValueTo('vojta@google.com,someone@somewhere.com');
+      expect(scope.email).toEqual(['vojta@google.com', 'someone@somewhere.com']);
+      expect(inputElm).toBeValid();
+      expect(widget.$error.email).toBeFalsy();
+
+      changeInputValueTo('someone@somewhere.com,invalid@');
+      expect(scope.email).toBeUndefined();
+      expect(inputElm).toBeInvalid();
+      expect(widget.$error.email).toBeTruthy();
+    });
+
+    it('should mark required multiple e-mail as invalid', function() {
+      compileInput('<input type="email" multiple required ng-model="email" name="alias" />');
+
+      var widget = scope.form.alias;
+
+      changeInputValueTo('');
+      expect(scope.email).toBeUndefined();
+      expect(inputElm).toBeInvalid();
+      expect(widget.$error.required).toBeTruthy();
+    });
+
+    it('should observe multiple attribute', function() {
+      compileInput('<input type="email" ng-multiple="multiple" ng-model="email" name="alias" />');
+
+      var widget = scope.form.alias;
+
+      changeInputValueTo('vojta@google.com');
+      expect(scope.email).toEqual('vojta@google.com');
+
+      scope.$apply('multiple = true');
+      expect(scope.email).toEqual(['vojta@google.com']);
+
+      changeInputValueTo('vojta@google.com,someone@somewhere.com');
+      expect(inputElm).toBeValid();
+
+      scope.$apply('multiple = false');
+      expect(inputElm).toBeInvalid();
+      expect(widget.$error.email).toBeTruthy();
+    });
 
     describe('EMAIL_REGEXP', function() {
       /* global EMAIL_REGEXP: false */