从正则表达式 angular 创建自定义验证器反应形式

Question

我在电子邮件表单中使用了一些正则表达式验证，这是它的样子

this.customerForm = this.fb.group({
      email: [null, {
        Validators.pattern('^[^\s@]+@[^\s@]+\.[^\s@]{1,}$')],updateOn: 'blur'
      }]
    });

验证工作正常，但我需要为这个正则表达式制作自定义验证器，知道如何开始，谢谢

我试过这样

properEmailValidator(): ValidatorFn {
    const nameRe = /^[^\s@]+@[^\s@]+\.[^\s@]{1,}$/;
    return (control: AbstractControl): ValidationErrors | null => {
      const forbidden = nameRe.test(control.value);
      return forbidden ? { emailNotValid: { value: control.value } } : null;
    };
  }

但这不起作用:(

Answer 1

当您将表达式定义为字符串时，您必须转义反斜杠，就像您在 Validators.pattern('^[^\s@]+@[^\s@]+\.[^\s@]{1,}$').

中所做的那样

但是，如果您像在验证器函数中那样将表达式定义为正确的 RegExp，则不能这样做，因为它会尝试将其匹配为反斜杠字符。所以你需要修改你的RegExp如下。

const nameRe = /^[^\s@]+@[^\s@]+\.[^\s@]{1,}$/;

干杯

Answer 2

如果你使用的是反应式表单，那么你可以在创建表单的时候直接放上去。

filterForm: FormGroup;

filterForm = formBuilder.group({
  firstName: [null],
  lastName: [null],
  zipCode: [null, [Validators.pattern('[0-9]{5}')]]
});

从正则表达式 angular 创建自定义验证器反应形式

Creating custom validator reactive form from regular expression angular

typescript

angular

angular-reactive-forms