Validators.email should allow null/empty values

[klinem]

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[x] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior
Controls using the email validator are invalid if no value is present.

Expected behavior
The email validator should allow null/empty values.

Minimal reproduction of the problem with instructions
http://plnkr.co/edit/tsQ3C5tg3ba9xYAWHdLO?p=preview

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

• Angular version: 4.x.x

• Browser: all

• Language: all

[dawidgarus]

+1
It's worth mentioning, that current behavior is inconsistent with other validators.
For example, minlength allows empty strings.

Validators.minLength(3)({ value: '' }) === null
Validators.minLength(3)({ value: 'a' }) !== null
Validators.minLength(3)({ value: 'ab' }) !== null
Validators.minLength(3)({ value: 'abc' }) === null

[crain]

There is a pull request for this #16902

[rehbein-dieter]

A workaround in template driven forms (set [email] to false, when value is empty. Ensure to initialize the model value with an empy string):

<input [(ngModel)]="model.email" [email]="model.email!==''">

[jnizet]

Please fix this for 5.0, since it's a breaking change, otherwise we're going to have to wait for 6 more months and it will be even more painful.

[danwulff]

@rehbein-dieter Nice simple workaround.

[richmondp]

@rehbein-dieter Thanks for the simple workaround. Do you get a console error when you use it though? I get the following error when I leave the field (empty) then go back and add a character.

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'null'. Current value: 'true'

[sijovijayan]

@rehbein-dieter Nice workaround. Thank you very much !!!

[jloosli]

@rehbein-dieter or anyone else, is there a similar workaround for when you're using reactive forms e.g.:

<input formControlName="email" >

[lazarljubenovic]

@jloosli A workaround for both types of forms is to simply wrap is in your own custom validator, check the special case and feed the control to Validator.email.

[jloosli]

For what it's worth, as a workaround, I add and remove the email validator based on whether or not the value is empty:

const emailField = this.appointment.get('email');
emailField.valueChanges
  .forEach(email => {
    if (!email) {
      emailField.setValidators([]);
    } else {
      emailField.setValidators([Validators.email]);
    }
  });
}

[davidshepherd7]

For reactive forms this validator works for me:

function emailOrEmpty(control: AbstractControl): ValidationErrors | null {
    return control.value === '' ? null : Validators.email(control);
}

[CDDelta]

@Toxicable @kara can we get this fixed before v6 is released since it is a breaking change?

[RealZimboGuy]

for anyone else wanting a workaround for this, declare a local variable
validateEmail = "[a-zA-Z0-9._-]+[@]+[a-zA-Z0-9-]+[.]+[a-zA-Z]{2,6}";

then in your form group dont use email and use a pattern
formGroup: ['', Validators.pattern(this.validateEmail)]

[trotyl]

Fixed by #20869, which has landed in 6.0.0-beta.4, can be closed now.

[pawer13]

Working with version 5.X , I'm using the following validator:

(c: AbstractControl) => { if (!c.value) return null; return Validators.email(c);}

[pkozlowski-opensource]

Fixed in 140e7c0

[prasad-desilva]

Just a workaround
<input [(ngModel)]="model.email" #email="ngModel" [email]="model.email != null && model.email !==''">

[ikomangmahendra]

@davidshepherd7 Thanks Bro

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}