Question

我创建了一个自定义验证程序来检查用户填写的电子邮件地址。无论如何，电子邮件字段不是必需的，但如果我添加验证器，它也包括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
        }
    };
}

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

你有更好的主意吗？

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

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

我不认为这可能被视为副作用，因为该功能的目的是找到符合电子邮件格式的无效字符串。

Angular2：如何添加验证器和排除所需

2 个答案: