Question

我的.ts文件中有这个Angular验证器：

this.detailsForm = formBuilder.group(
            {

                email: ['', Validators.compose([Validators.email])]
            });

这很好但是当我应用电子邮件验证器时，它也会应用所需的验证器。我也想允许空值。我该怎么做？

Answer 1

这只是因为null /空值与预期形状（正则表达式）不匹配。

This是与Validators.email一起使用的当前正则表达式：

const EMAIL_REGEXP = /^(?=.{1,254}$)(?=.{1,64}@)[-!#$%&'*+/0-9=?A-Z^_`a-z{|}~]+(\.[-!#$%&'*+/0-9=?A-Z^_`a-z{|}~]+)*@[A-Za-z0-9]([A-Za-z0-9-]{0,61}[A-Za-z0-9])?(\.[A-Za-z0-9]([A-Za-z0-9-]{0,61}[A-Za-z0-9])?)*$/;

console.log(EMAIL_REGEXP.test('')); // false
console.log(EMAIL_REGEXP.test(null)); // false
console.log(EMAIL_REGEXP.test('a@a.com')); // true

为了实现您的目标，您可以build a custom validator，接受此正则表达式或null /空值，或者如果我有此要求，我会做什么：an async validator如果Validators.email大于0，则在值中应用length。

Answer 2

自定义验证器：

export function emailValidator(): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } => {
    // tslint:disable-next-line:max-line-length
    let regex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    const mail = control.value;
    const matches = regex.test(mail);
    // If value is null, let the required error handle it
    return !mail ? null : matches ? null : { 'mailPattern': { mail } };
  };
}

Angular Validators.email允许null值

2 个答案: