Angular Validator pattern not working as expected

Question

I'm using angular reactive form. In a formControl of the formGroup I've set Validator.pattern with a Regex that's not working properly and I can't see why. I've validated the Regex on this site https://www.regextester.com/99144, to check it and it worked correctly

The Regex (Minimum eight characters, at least one uppercase letter, one lowercase letter, one number and one special character)

pattern = new RegExp(/^(?=\S*[a-z])(?=\S*[A-Z])(?=\S*\d)(?=\S*[^\w\s])\S{8,}$/gm)

This is the formGroup

   this.trocarASenhaForm = this.fb.group({
      UserId: [''],
      SenhaAtual: ['', [Validators.required, ]],
      NovaSenha: ['',[Validators.required, Validators.pattern(this.pattern)]],
      ConfirmaSenha: ['',[Validators.required, Validators.pattern(this.pattern)]]
    },{ validator: this.checkPasswords })

So, when I type for example "World@20" it validates true, but then when I start typing "World@201" it validates false, and it is intercalatable. "World@2010" it validates true again, "World@20100" it validates false and so forth

Answer 1

Try the following:

const pattern = '^(?=\\S*[a-z])(?=\\S*[A-Z])(?=\\S*\d)(?=\\S*[^\\w\\s])\\S{8,}$';

and

this.trocarASenhaForm = this.fb.group({
  UserId: [''],
  SenhaAtual: ['', [Validators.required]],
  NovaSenha: ['',[Validators.required, Validators.pattern(pattern)]],
  ConfirmaSenha: ['',[Validators.required, Validators.pattern(pattern)]]},
  { validator: this.checkPasswords }
)