Angular: Validators.email jest nieprawidłowy, jeśli pusty

Question

Tworzę aplikację w Angular (4.0), która zawiera formularz (FormGroup). W tym formularzu mam dane wejściowe do wiadomości e-mail (z FormControl) i używam Validators.email do sprawdzania poprawności.

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

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

Ale gdy wejście jest pusta, jest ona nieważna (posiada klasę ng-invalid), nawet jeśli nie jest to wymagane.

Czy to właściwe zachowanie? Co mogę zrobić?

Answer 1

eric2783 rozwiązanie „s jest dość dobre, jednak - jeśli w przyszłości wyjście Validators.email zmieni, to niestandardowy walidator nie będzie kompatybilny z wyjściem walidatora kątowego za.

Oto, co należy zrobić, aby zachować zgodność:

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

    return Validators.email(control); 
} 

Answer 2

Możesz osiągnąć to, co chcesz, za pomocą niestandardowego weryfikatora. Oto walidator pisałem aby zmusić go do pracy:

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

    return null; 
} 

Następnie można zastąpić validators.push(Validators.email); z validators.push(this.customEmailValidator);

Wykorzystuje kątowe zbudowany w email walidator ale również dba kontrola email ma wartość przed zwróceniem błędu .

Answer 3

obejście w postaci szablonów napędzane:

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

ten pracował dla mnie (zapewnienie, aby zainicjować wartości modelu z pustym ciągiem).

Answer 4

Najlepszym rozwiązaniem, które znalazłem to:

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

Answer 5

Najkrótsza forma zrobić to byłoby:

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