角: Validators.email无效，如果为空

Question

我正在用角(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类)，即使它不是必需的。

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

Answer 1

然而，eric2783的解决方案相当不错--如果将来Validators.email的输出发生变化，那么这个自定义验证器将与角的验证器输出不兼容。

为了保持兼容性，您应该这样做：

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

您可以使用自定义验证器完成所需的任务。下面是我为使其正常工作而编写的验证器：

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

它使用了角的内置电子邮件验证器，但也确保电子邮件控制有一个值，然后返回一个错误。