0

I'm trying to create a form with built-in validators and cross-field validator and it's not working properly and I can't figure out why.

There are 4 types of built-in validators: required, pattern, minLength and maxLength.

  • Required is working for all the fields.

  • Pattern is working only for names group.

Here is some code - stackblitz.

Robert
  • 186
  • 3
  • 6
  • 16

1 Answers1

1

Try changing your regexp to something like this:

password = '(?=[^A-Z]*[A-Z])(?=[^a-z]*[a-z])(?=[^0-9]*[0-9]).{5,}'

RegExp is from this answer: https://stackoverflow.com/a/51741621/2050306

Also it is helpful to be able to see these errors during development:

<pre>
  {{ myForm.value | json }}
  {{ myForm.valid }}
  {{ myForm.get('passwords').get('password').errors | json }}
</pre>

error object keys are lowercase, change this minLength -> minlength in your TS file:

this.myForm.get('names.firstName').hasError('minlength') ?

Check this stackblitz.

robert
  • 5,742
  • 7
  • 28
  • 37
  • Password pattern looks like it's working now but there are still minLength and maxLength which are not working. For example if I enter on firstName input a word with less than 5 letters, no message is displayed but field is turning red. – Robert Jul 18 '19 at 12:12
  • @Robert I updated my answer check the stackblitz. Generally all the places where you call get***errorMessage use lowercase keys. minLenght -> minlength etc. – robert Jul 18 '19 at 12:31