feat(input.email): Input of type email support multiple attribute

src/ng/directive/input.js

@@ -2,6 +2,7 @@
 
 var URL_REGEXP = /^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?$/;
 var EMAIL_REGEXP = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/;
+var EMAIL_MULTIPLE_REGEXP = /^(([A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4})[,;]\s{0,1})*([A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4})$/;
 var NUMBER_REGEXP = /^\s*(\-|\+)?(\d+|(\d*(\.\d*)))\s*$/;
 
 var inputType = {
@@ -228,7 +229,8 @@ var inputType = {
    *
    * @description
    * Text input with email validation. Sets the `email` validation error key if not a valid email
-   * address.
+   * address. Supports `multiple` attribute to input comma or semicolon seperated list of email
+   * addresses.
    *
    * @param {string} ngModel Assignable angular expression to data-bind to.
    * @param {string=} name Property name of the form under which the control is published.
@@ -590,7 +592,9 @@ function emailInputType(scope, element, attr, ctrl, $sniffer, $browser) {
   textInputType(scope, element, attr, ctrl, $sniffer, $browser);
 
   var emailValidator = function(value) {
-    if (isEmpty(value) || EMAIL_REGEXP.test(value)) {
+    var regexp = attr.multiple ? EMAIL_MULTIPLE_REGEXP : EMAIL_REGEXP;
+    if (isEmpty(value) || regexp.test(value)) {
+
       ctrl.$setValidity('email', true);
       return value;
     } else {

test/ng/directive/inputSpec.js

@@ -305,6 +305,83 @@ describe('ngModel', function() {
     expect(element).toBeInvalid();
     expect(element).toHaveClass('ng-invalid-required');
   }));
+
+
+  it('should set css classes (ng-valid, ng-invalid, ng-pristine, ng-dirty) on multiple input',
+      inject(function($compile, $rootScope, $sniffer) {
+    var element = $compile('<input type="email" ng-model="value" multiple />')($rootScope);
+    $rootScope.$digest();
+
+    expect(element).toBeValid();
+    expect(element).toBePristine();
+    expect(element.hasClass('ng-valid-email')).toBe(true);
+    expect(element.hasClass('ng-invalid-email')).toBe(false);
+
+    $rootScope.$apply(function() {
+      $rootScope.value = 'invalid-email';
+    });
+    expect(element).toBeInvalid();
+    expect(element).toBePristine();
+    expect(element.hasClass('ng-valid-email')).toBe(false);
+    expect(element.hasClass('ng-invalid-email')).toBe(true);
+
+    element.val('invalid-again');
+    browserTrigger(element, ($sniffer.hasEvent('input')) ? 'input' : 'change');
+    expect(element).toBeInvalid();
+    expect(element).toBeDirty();
+    expect(element.hasClass('ng-valid-email')).toBe(false);
+    expect(element.hasClass('ng-invalid-email')).toBe(true);
+
+    $rootScope.$apply(function() {
+      $rootScope.value = 'vojta@google.com';
+    });    
+    expect(element).toBeValid();
+    expect(element).toBeDirty();
+    expect(element.hasClass('ng-valid-email')).toBe(true);
+    expect(element.hasClass('ng-invalid-email')).toBe(false);
+
+    $rootScope.$apply(function() {
+      $rootScope.value = 'vojta@google.com, sebastian@janzen';
+    });
+    expect(element).toBeInvalid();
+    expect(element).toBeDirty();
+    expect(element.hasClass('ng-valid-email')).toBe(false);
+    expect(element.hasClass('ng-invalid-email')).toBe(true);
+
+    $rootScope.$apply(function() {
+      $rootScope.value = 'vojta@google.com, sebastian@janzen.it';
+    });
+    expect(element).toBeValid();
+    expect(element).toBeDirty();
+    expect(element.hasClass('ng-valid-email')).toBe(true);
+    expect(element.hasClass('ng-invalid-email')).toBe(false);
+
+    $rootScope.$apply(function() {
+      $rootScope.value = 'vojta@google.com, sebastian@janzen.it, sebastian+2@janzen.';
+    });
+    expect(element).toBeInvalid();
+    expect(element).toBeDirty();
+    expect(element.hasClass('ng-valid-email')).toBe(false);
+    expect(element.hasClass('ng-invalid-email')).toBe(true);
+
+    $rootScope.$apply(function() {
+      $rootScope.value = 'vojta@google.com, sebastian@janzen.it, sebastian+2@janzen.it';
+    });
+    expect(element).toBeValid();
+    expect(element).toBeDirty();
+    expect(element.hasClass('ng-valid-email')).toBe(true);
+    expect(element.hasClass('ng-invalid-email')).toBe(false);
+
+    dealoc(element);
+  }));
+
+  it('should set invalid classes on init and multiple', inject(function($compile, $rootScope) {
+    var element = $compile('<input type="email" ng-model="value" required multiple />')($rootScope);
+    $rootScope.$digest();
+
+    expect(element).toBeInvalid();
+    expect(element).toHaveClass('ng-invalid-required');
+  }));
 });