Angular 2 : Validators.pattern() not working

Question

I am trying to validate input type=\"text\" using a pattern. I want text only.

Component :

 this.from = this.fb.group({
  name: [\'\',[         


        

Answer 1

Pass pattern as string, without / which are the delimiters for regex

Validators.pattern('^[a-zA-Z]+$')

Answer 2

/((?<!([A-Z]{1,10})-?)[A-Z]+-\\d+)/

strong text this is not validating in angular for JiraId

Answer 3

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

Answer 4

Text + 'space'

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

Answer 5

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}/)

Answer 6

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/