Angular: Validators.email is invalid if empty

Question

I am creating an application in Angular (4.0) that contains form ( FormGroup). In this form, I have an email input (s FormControl) and I use Validators.emailto validate.

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 a class ng-invalid), even if it is not required.

Is this the right behavior? What can I do?

Answer 1

However solution

eric2783 is pretty good - if the result of work Validators.emailchanges in the future , then this custom validator will become incompatible with the output signal of angular.

, :

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

  return Validators.email(control);
}

Answer 2

, , :

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

Answer 3

, :

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

(, ).

Answer 4

, , . , , :

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

    return null;
}

validators.push(Validators.email); validators.push(this.customEmailValidator);

angular , , .

Answer 5

:

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