首页 文章

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

提问于
浏览 次
13

我正在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 类），即使它不是必需的 .

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

javascript angularjs forms angular validation

5 回答

  • 12

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

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

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

  return Validators.email(control);
}
    回复于
  • 11

    我找到的最佳解决方案是：

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

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

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

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

    回复于
  • 2

    您可以使用自定义验证器完成所需的操作 . 这是我为了让它起作用而编写的验证器：

    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内置的电子邮件验证程序，但也确保电子邮件控件在返回错误之前具有值 .

    回复于
  • 5

    最简单的形式是：

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

相关问题