Angular：Validators.email 如果为空则无效答案

【问题标题】：Angular: Validators.email invalid if emptyAngular：Validators.email 如果为空则无效
【发布时间】：2017-10-10 16:48:18
【问题描述】：

我正在 Angular (4.0) 中创建一个应用程序，其中包含一个表单 (FormGroup)。在这个表单中，我有一个电子邮件输入（带有FormControl），我使用Validators.email 进行验证。

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

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

但是当输入为空时，它是无效的（它有一个ng-invalid 类），即使它不是必需的。

这是正确的行为吗？我能做什么？

【问题讨论】：

看看这个issue。
所以还没有解决办法？我应该改用 Validators.pattern 吗？ @developer033
是的，在这种情况下，现在最好使用Validatos.pattern。

标签： javascript angular forms validation

【解决方案1】：

这样做的最短形式是：

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

【讨论】：

【解决方案2】：

我发现的最佳解决方案是：

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

【讨论】：

在 Angular 5 中，这会导致 Angular 生命周期出现问题，即在检查后已更改。

【解决方案3】：

eric2783 的解决方案非常好，但是 - 如果将来Validators.email 的输出发生变化，那么这个自定义验证器将与 angular 的验证器输出不兼容。

为了保持兼容性，您应该采取以下措施：

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

  return Validators.email(control);
}

【讨论】：

【解决方案4】：

模板驱动表单中的解决方法：

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

这对我有用（确保使用空字符串初始化模型值）。

【讨论】：

【解决方案5】：

您可以使用自定义验证器完成您想要的。这是我为使其工作而编写的验证器：

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);

它使用 Angular 内置的电子邮件验证器，但也确保电子邮件控件在返回错误之前有一个值。

【讨论】：