Angular 2 : Validators.pattern() not working

Remember to not do this:

Validators.pattern("[A-Z]{1,2}[0-9][0-9A-Z]?\s?[0-9][A-Z]{2}")

The gotcha is that you need a double backslash before the s to defeat string escape thus:

Validators.pattern("[A-Z]{1,2}[0-9][0-9A-Z]?\\s?[0-9][A-Z]{2}")

I had this same problem with a different pattern:

^\d{1,4}$

And I was using it like this:

Validators.pattern("^\d{1,4}$") // wrong

The problem is that the backslash \ has to be escaped, so the correct form is:

Validators.pattern("^\\d{1,4}$") // correct

emailRegex = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
this.form = fb.group({
      Email : new FormControl({value: null}, Validators.compose([
        Validators.required,
        Validators.pattern(this.emailRegex)]))
});

This is what I've found when using Validators.pattern():

Works

Validators.pattern('[a-z]{2}')
Validators.pattern(/^[a-z]{2}$/)

Doesn't work

Validators.pattern(/[a-z]{2}/i)
Validators.pattern(/[a-z]{2}/)

You can pass the validator as string or regex, both work if you do it correctly. Let's consider the requirement text only:

As regex

const regex = /[a-zA-Z]*/;
let formControl = new FormControl('', Validators.pattern(regex));

In a FormControl, the validator will set state VALID if any matches to the regex are found (substrings). Therefore we need to specify the beginning and end of the input to enforce exact matches, by ^ and $:

const regex = /^[a-zA-Z]*$/;

This will return VALID for single words, which satisfies the OPs requirement. However, it will return INVALID for longer text containing whitespace, commas, punctuations and hyphens. So if we want, we can add those to the character set:

const regex = /^[a-zA-Z,.\s-]*$/;

Since we are working with a regex, we can simplify the character set by setting the i flag at the end. This tells the regex to ignore case-sensitivity, so it's enough with only one of the character ranges:

const regex = /^[a-z,.\s-]*$/i;

The above regex will be VALID for any text containing UPPER-CASE, lower-case, whitespaces, punctuation and commas. If you want to accept exclamation marks and questions marks as well, simply add them to the character set:

const regex = /^[a-z,.!?\s-]*$/i;

As string

When passing the validator expression as a string, you do not use the regex delimiters / /, and cannot pass regex flags. As a consequence, we have to include both UPPER and lower case characters in the set. As others point out, you also have to escape any backward slashes in a string.

The equivalent validator as a string would look like this:

const validatorString = '^[a-zA-Z,.!?\\s-]*$';
let formControl = new FormControl('', Validators.pattern(validatorString));

Note that if you leave out the ^ and $ when the expression is passed as a string, Angular will automatically add them when processing the validator. That's why passing the expression as a string often appears to work better than regex. Personally, I prefer regex over string.

To better understand the concepts of Regular Expressions, I highly recommend this website: https://regexr.com/

Text + 'space'

Validators.pattern('[a-zA-Z ]*')

I've tried using the Validators.pattern with a regex string like this

Validators.pattern('[A-Za-z]{6}') // Didn't work

But when I was reading the docs, I've noticed that If a string is passed, the ^ character is prepended and the & character is appended to the provided string (if not already present)

This is what worked for me

Validators.pattern('^[A-Za-z]{6}$')

You do not need string in Validator.pattern. You can either use string or regex expression directly. See:

I also had problem converting from c# to angular. You need an extra backslash on the \d but not on the regular escaped characters.

ValidationExpression="[\d|\*|w|#]{0,25}"

to

Validators.pattern('[\\d|*|w|#]{0,25}')