Angular2：如何添加验证器并排除所需答案

【问题标题】：Angular2: how to add validator and exclude requiredAngular2：如何添加验证器并排除所需
【发布时间】：2017-04-27 01:22:04
【问题描述】：

我创建了一个自定义验证器来检查用户填写的电子邮件地址。无论如何，电子邮件字段不是必需的，但如果我添加我的验证器，它也会包含required。

这是我在组件类的constructor 中的表单：

    this.myForm = fb.group({
        'name': [''],
        'surname': [''],
        'username': ['', Validators.required],
        'email': ['', validateEmail]
    });

电子邮件字段不是必需的，但如果用户不填写它，则表单不会得到验证。同时，如果用户填写，我希望应用电子邮件验证。

这是我的电子邮件验证器：

export function validateEmail(c: FormControl) {
    var EMAIL_REGEXP = /^(|(([A-Za-z0-9]+_+)|([A-Za-z0-9]+\-+)|([A-Za-z0-9]+\.+)|([A-Za-z0-9]+\++))*[A-Za-z0-9]+@((\w+\-+)|(\w+\.))*\w{1,63}\.[a-zA-Z]{2,6})*$/i;

    return EMAIL_REGEXP.test(c.value) ? null : {
        validateEmail: {
            valid: false
        }
    };
}

我可以编辑我的自定义验证器以接受空字符串，但我认为这不是解决我的问题的正确方法。

你有更好的主意吗？

【问题讨论】：

我可以编辑我的自定义验证器以接受空字符串，但我认为这不是解决我的问题的正确方法。：这看起来是非常自然和正确的事情对我做。
嗯...如果我为电子邮件地址创建自定义验证器，我希望它无法验证空字符串，因此我可以在其他组件中重用它。你不同意吗？
为什么不能重复使用？想要一个可选的电子邮件地址，请使用电子邮件验证器。想要一个必需的电子邮件地址，使用 required 和电子邮件验证器。每个验证器都有自己的职责和特定的错误，您可以将它们组合起来以实现所需的行为。

标签： forms validation angular angular2-forms angular2-formbuilder

【解决方案1】：

我创建了一个带有参数的自定义验证器。所以它可以用来检查有效的电子邮件，甚至可以检查所需的有效电子邮件。它仍然是可重复使用的，甚至可以不需要，如果你用true 或false 调用它。

代码如下：

import {FormControl} from "@angular/forms";

export const validateEmail = (canBeEmpty:boolean) => {
    return (control:FormControl) => {
        var EMAIL_REGEXP = /^(|(([A-Za-z0-9]+_+)|([A-Za-z0-9]+\-+)|([A-Za-z0-9]+\.+)|([A-Za-z0-9]+\++))*[A-Za-z0-9]+@((\w+\-+)|(\w+\.))*\w{1,63}\.[a-zA-Z]{2,6})*$/i;

        if (canBeEmpty) {
            EMAIL_REGEXP = /^$|^(|(([A-Za-z0-9]+_+)|([A-Za-z0-9]+\-+)|([A-Za-z0-9]+\.+)|([A-Za-z0-9]+\++))*[A-Za-z0-9]+@((\w+\-+)|(\w+\.))*\w{1,63}\.[a-zA-Z]{2,6})*$/i;
        }

        return EMAIL_REGEXP.test(control.value) ? null : {
            validateEmail: {
                valid: false
            }
        };
    };
}

【讨论】：

【解决方案2】：

控制值允许为空字符串，如下：

static emailValidator(control: any) {
  // RFC 2822 compliant regex
  var EMAIL_REGXP = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/;

  if ( control.value === '' || control.value.match(EMAIL_REGXP) ) {
    return null;
  } else {
    return { 'invalidEmailAddress': true };
  }
};

我认为这不会被视为副作用，因为该函数的目的是查找应符合电子邮件格式的无效字符串。

【讨论】：