Angular: Validators.email invalid if empty

Question

I'm creating an app in Angular (4.0), that contains a form (FormGroup). In this form I have an email input (with FormControl), and I use Validators.email for validation.

import { Validators } from '@angular/forms';

// ...
let validators = [];
if ([condition]) {
    validators.push(Validators.email);
}
let fc = new FormControl([value] || '', validators);
// ...

But when the input is empty, it is invalid (it has an ng-invalid class), even if it's not required.

Is this a proper behavior? What can I do?

Answer 1

eric2783's solution is pretty good, however - if, in future, the output of Validators.email will change, then this custom validator will become not compatible with the angular's validator output.

Here's what you should do to keep the compatibility:

private customEmailValidator(control: AbstractControl): ValidationErrors {
  if (!control.value) {
    return null;
  }

  return Validators.email(control);
}

Answer 2

The best solution that i found was this:

<input type="email" name="email" [(ngModel)]="model.Email" [email]="model.Email!='' && model.Email!=null">

Answer 3

You can accomplish what you want with a custom validator. Here's the validator I wrote to get it to work:

private customEmailValidator(control: AbstractControl): {[key: string]: any} {
    const emailError = Validators.email(control);
    if (control.value && emailError) {
        return {'email': {}};
    }

    return null;
}

Then you can replace validators.push(Validators.email); with validators.push(this.customEmailValidator);

It uses angular's built in email validator but also makes sure the email control has a value before returning an error.