使用模式的格式电子邮件自定义验证不起作用

Question

我想在ngx格式中验证输入(电子邮件)。尝试使用下面的代码，但它不起作用

app.module.ts

export function EmailValidator(control: FormControl): ValidationErrors {
    return /^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$/.test(control.value) ? null : { 'email': true };
}

export function EmailValidatorMessage(err, field: FormlyFieldConfig) {
    return `"${field.formControl.value}" is not a valid Email Address`;
}

app.component.ts

{
    key: 'email',
    type: 'input',
    className: 'flex-3',
    templateOptions: {
        type: 'text',
        label: 'Email',
        placeholder: 'Email',
    },
    validators: {
        validation: ['email'],
    }
}

Answer 1

请将您的正则表达式模式替换为以下模式。

/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/

此外，必须在app.module.ts文件的ng模块部分中注册验证器和验证器消息

 FormlyModule.forRoot({
  validators: [

    { name: "email", validation: EmailValidator }
,],
  validationMessages: [

    { name: "email", message: EmailValidatorMessage }
  ]
})

],

请将您的代码与此https://stackblitz.com/edit/ngx-formly-custom-validator?file=src%2Fapp%2Fapp.component.ts进行比较

有关正则表达式模式，请参阅此https://www.w3resource.com/javascript/form/email-validation.php