fix(forms): make Validators.email support optional controls (angular#…

…20869) Bring email validator in line with other validators so that empty values are ignored. PR Close angular#20869
jbogarthyde · Feb 23, 2018 · 86ca527 · 86ca527
1 parent d3a8218
commit 86ca527
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 0 deletions.
diff --git a/packages/forms/src/validators.ts b/packages/forms/src/validators.ts
@@ -125,6 +125,9 @@ export class Validators {
    * Validator that performs email validation.
    */
   static email(control: AbstractControl): ValidationErrors|null {
+    if (isEmptyInputValue(control.value)) {
+      return null;  // don't validate empty values to allow optional controls
+    }
     return EMAIL_REGEXP.test(control.value) ? null : {'email': true};
   }
 

diff --git a/packages/forms/test/template_integration_spec.ts b/packages/forms/test/template_integration_spec.ts
@@ -1265,6 +1265,13 @@ import {NgModelCustomComp, NgModelCustomWrapper} from './value_accessor_integrat
            tick();
 
            expect(input.nativeElement.value).toEqual('');
+           expect(control.hasError('email')).toBe(false);
+
+           input.nativeElement.value = '@';
+           dispatchEvent(input.nativeElement, 'input');
+           tick();
+
+           expect(input.nativeElement.value).toEqual('@');
            expect(control.hasError('email')).toBe(true);
 
            input.nativeElement.value = 'test@gmail.com';

diff --git a/packages/forms/test/validators_spec.ts b/packages/forms/test/validators_spec.ts
@@ -159,6 +159,12 @@ import {map} from 'rxjs/operator/map';
     });
 
     describe('email', () => {
+      it('should not error on an empty string',
+         () => expect(Validators.email(new FormControl(''))).toBeNull());
+
+      it('should not error on null',
+         () => expect(Validators.email(new FormControl(null))).toBeNull());
+
       it('should error on invalid email',
          () => expect(Validators.email(new FormControl('some text'))).toEqual({'email': true}));