Forms Angular2：如何添加验证器和排除必需的

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

必需的

这是我在组件类的

构造函数中的表单：

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

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

您有更好的主意吗？
我创建了一个接受参数的自定义验证器。因此，它可以用来检查有效的电子邮件，甚至检查所需的有效电子邮件。
如果您使用
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
            }
        };
    };
}

我创建了一个接受参数的自定义验证器。因此，它可以用来检查有效的电子邮件，甚至检查所需的有效电子邮件。
如果您使用
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
            }
        };
    };
}

允许控件值为空字符串，如下所示：

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

我认为这不会被视为副作用，因为函数的目的是查找应符合电子邮件格式的无效字符串。
允许控件值为空字符串，如下所示：

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

我不认为这会被视为副作用，因为该函数的目的是查找应符合电子邮件格式的无效字符串。
我可以编辑我的自定义验证器以接受空字符串，但我认为这不是解决我问题的正确方法。：这看起来是对我来说非常自然和正确的做法。嗯。。。如果我为电子邮件地址创建一个自定义验证器，我希望它不能验证空字符串，所以我可以在其他组件中重用它。你不同意吗？为什么不能重复使用？想要一个可选的电子邮件地址，请使用电子邮件验证程序。想要一个必需的电子邮件地址，请使用必需的电子邮件验证程序。每个验证器都有自己的责任，有自己的特定错误，您可以编写它们以实现所需的行为。我可以编辑我的自定义验证器以接受空字符串，但我认为这不是解决我的问题的正确方法。注意：这看起来对我来说是非常自然和正确的做法。嗯。。。如果我为电子邮件地址创建一个自定义验证器，我希望它不能验证空字符串，所以我可以在其他组件中重用它。你不同意吗？为什么不能重复使用？想要一个可选的电子邮件地址，请使用电子邮件验证程序。想要一个必需的电子邮件地址，请使用必需的电子邮件验证程序。每个验证器都有自己的责任、自己的特定错误，您可以编写它们以实现所需的行为。