Creating custom validator reactive form from regular expression angular

Question

I have some regular expression validation that I use on email form, this is how it looks

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

Validation work fine, but what i need is to make custom validator for this regular expression, any idea how to start, thanks

I have tried like this

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

But this does not work:(

You can find the guide from the Angular Docs on how to do it here — akotech
– akotech, Commented Feb 5, 2022 at 18:17

akotech · Accepted Answer · 2022-02-05 18:51:20Z

1

When you define the expresion as a string, you have to escape the backslashes, as you properly did in the Validators.pattern('^[^\\s@]+@[^\\s@]+\\.[^\\s@]{1,}$').

But if you define the expresión as a proper RegExp as you are doing in the validator function, you must not do it, as it would try to match it as a backslash character. So you need to modify your RegExp as follows.

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

Cheers

answered Feb 5, 2022 at 18:51

akotech

2,3042 gold badges7 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Abhilash Asokan · Accepted Answer · 2022-02-05 18:54:15Z

0

If you are using reactive form, then you can put it directly when you are creating the form.

filterForm: FormGroup;

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

answered Feb 5, 2022 at 18:54

Abhilash Asokan

3481 silver badge6 bronze badges

Collectives™ on Stack Overflow

Creating custom validator reactive form from regular expression angular

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related