Question

我制作了一个非常简单的电子邮件验证器，如下所示：

function validateEmail(formControl: FormControl): {[key: string]: any} {
    const regExp = new RegExp(`^[\\w.%+\-]+@[\\w.\-]+\.[a-zA-Z]{2,16}$`);
    return regExp.test(formControl.value) ? null : { email: true };
}

当我将其添加到反应形式方法中的验证器列表时，这是有效的。

但是当我将上述功能更改为：

function validateEmail(): ValidatorFn {
    return (formControl: FormControl): {[key: string]: any} => {
        console.log(formControl.value);
        const regExp = new RegExp(`^[\\w.%+\-]+@[\\w.\-]+\.[a-zA-Z]{2,16}$`);
        return regExp.test(formControl.value) ? null : { email: true };
    }
}

然后验证不起作用。我没有收到任何错误消息。控制台输出什么都没有显示。

我做错了什么？

Answer 1

您应该将control作为AbstractControl传递给ValidatorFn，这意味着您的代码应如下所示：

function validateEmail(): ValidatorFn {
  return (control: AbstractControl): {[key: string]: any} => {
    console.log(control.value);
    const regExp = new RegExp(`^[\\w.%+\-]+@[\\w.\-]+\.[a-zA-Z]{2,16}$`);
    return regExp.test(control.value) ? null : { email: true };
  } 
}

它应该解决你的问题，我有非常类似的验证器，这样解决：

export function emailValidator(): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } => {
    const email = control.value;

    if ( '' === email || null === email ) {
      return null;
    } else {
      return emailRegEx.test(email) ? null : { invalidEmail: { email } };
    }
  };
}

其中emailRegEx被定义为函数外的常量，并且当传递的值为空字符串或null时，函数返回null。

表单验证器关闭在Angular 2

1 个答案: