Angular：Validators.email無效，如果爲空

我在Angular（4.0）中創建了一個包含表單（FormGroup）的應用程序。在這種形式中，我有一個電子郵件輸入（與FormControl），我使用Validators.email進行驗證。Angular：Validators.email無效，如果爲空

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

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

但是當輸入是空的，它是無效的（它有一個ng-invalid類），即使不是必需的。

這是一個正確的行爲？我能做什麼？

來源

2017-05-11 Roland Rácz

看看這個[**問題**]（https://github.com/angular/angular/issues/16183）。 – developer033

那麼現在還沒有解決方案呢？我應該使用Validators.pattern嗎？ @ developer033 –

是的，在這種情況下，現在最好使用'Validatos.pattern'。 – developer033

eric2783的解決方案是相當不錯的，但是 - 如果在未來的Validators.email輸出會發生變化，那麼這個自定義驗證將成爲角的驗證輸出不兼容。

這裏是你應該做的，以保持兼容性什麼：

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

    return Validators.email(control); 
}

來源

2017-08-07 15:19:33 matewka

您可以使用自定義驗證程序完成您想要的操作。這是我寫的，以獲得驗證它的工作：

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

    return null; 
}

然後你就可以用validators.push(this.customEmailValidator);

它使用的角度內置的電子郵件驗證取代validators.push(Validators.email);也返回錯誤前，確保電子郵件控件的值。

來源

2017-07-10 17:15:30 erics2783

在模板驅動的形式一個解決方法：

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

這爲我工作（確保有一個空字符串初始化模型值）。

來源

2017-07-19 11:25:00

，我發現了這一點，最好的解決辦法：

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

來源

2017-08-15 13:40:16

這對我有用:) –

最短的形式，要做到這一點是：

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

來源

2018-03-01 13:16:33

Angular：Validators.email無效，如果爲空

回答

相關問題