web-dev-qa-db-fra.com

Angulaire: Validators.email invalide si vide

Je crée une application dans Angular (4.0), qui contient un formulaire (FormGroup). Dans ce formulaire, j'ai une entrée e-mail (avec FormControl ), et j'utilise Validators.email pour validation.

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

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

Mais lorsque l'entrée est vide, elle n'est pas valide (elle a un ng-invalid class), même si ce n'est pas obligatoire.

Est-ce un bon comportement? Que puis-je faire?

javascriptangularformsvalidation
15
Roland Rácz

La solution de eric2783 est cependant assez bonne - si, à l'avenir, la sortie de Validators.email changera, puis ce validateur personnalisé ne sera plus compatible avec la sortie du validateur angulaire.

Voici ce que vous devez faire pour conserver la compatibilité:

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

  return Validators.email(control);
}
14
matewka

La meilleure solution que j'ai trouvée était la suivante:

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

Solution de contournement dans les formulaires basés sur des modèles:

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

Cela a fonctionné pour moi (assurez-vous d'initialiser la valeur du modèle avec une chaîne vide).

5
Dieter Rehbein

Vous pouvez accomplir ce que vous voulez avec un validateur personnalisé. Voici le validateur que j'ai écrit pour le faire fonctionner:

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

    return null;
}

Ensuite, vous pouvez remplacer validators.Push(Validators.email); par validators.Push(this.customEmailValidator);

Il utilise le validateur de messagerie intégré d'angular mais s'assure également que le contrôle de messagerie a une valeur avant de renvoyer une erreur.

5
erics2783

La forme la plus courte pour ce faire serait:

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