Angular:Validators.email如果为空则无效

Question

我正在Angular(4.0)中创建一个包含form(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会改变,那么这个自定义验证器将与angular的验证器输出不兼容.

以下是保持兼容性应该做的事情:

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

它使用angular内置的电子邮件验证程序,但也确保电子邮件控件在返回错误之前具有值.

Answer 4

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

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

这对我有用(确保用空字符串初始化模型值).