Angular 2 Reactive Forms Pattern Validator; Ignoring Case

Question

In Angular 2.1.0 Reactive forms, I have a form using the formBuilder group function that attempts to use the pattern validator to validate one of the fields.

this.profileForm = this.formBuilder.group({
'email': [this.profile.email, [
            Validators.pattern('^[a-z0-9A-Z_]+(\.[_a-z0-9A-Z]+)*@[a-z0-9-A-Z]+(\.[a-z0-9-A-Z]+)*(\.[a-zA-Z]{2,15})$')
        ]],
//...

As you can see I have manually added the uppercase A-Z on the groups, but I was wondering if there is a way to specify the pattern validator to ignore case. I can't seem to find any examples online, and as I can tell you can't pass in an actual RegExp object it has to be a string.

Here's a lightweight regex reference: regexpal.com (click on "flags", there's a regex flag to ignore case) and here is a gigantic one: stackoverflow.com/questions/22937618/… (ignore case is under modifiers). — silentsod
– silentsod, Commented Dec 14, 2016 at 18:15

tt9 · Accepted Answer · 2016-12-20 18:07:30Z

3

In the more recent versions of Angular, these have fixed this issue, and the Validators.pattern function accepts RegExp objects now.

For this version I simply created a custom validation class and added my own pattern function which accepts a RegExp object. Looks like this:

import { AbstractControl, ValidatorFn } from '@angular/forms';
export class CustomValidators {

    public static pattern(reg: RegExp) : ValidatorFn {
        return (control: AbstractControl): { [key: string]: any } => {
            var value = <string>control.value;
            return value.match(reg) ? null : { 'pattern': { value } };
        }
    }
}

And the form that is referencing this validator looks like this:

    this.profileForm = this.formBuilder.group({
        'firstName': [{ value: this.profile.firstName, disabled: true }],

        //... other fields

        'email': [this.profile.email, [
            CustomValidators.pattern(/^[a-z0-9_]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,15})$/ig)
        ]],

        //...other fields

    });

answered Dec 20, 2016 at 18:07

tt9

6,1297 gold badges47 silver badges71 bronze badges

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

2 Comments

Zuriel Over a year ago

telling your form to reset() causes this error 'ERROR TypeError: Cannot read property 'match' of null'

Zuriel Over a year ago

changing this fixes it, but i guess it doesnt matter if angular 4 has pattern and regex. return value && value.match(reg) ? null : { 'pattern': { value } };

Collectives™ on Stack Overflow

Angular 2 Reactive Forms Pattern Validator; Ignoring Case

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related