Angular 9 - Validators.pattern('^[0-9][0-9][0-9]$') doesn't match with leading 0 number like 012

Question

in order to validate a simple PIN, which can include leading 0, I wrote the following very-simple regexp:

^[0-9][0-9][0-9][0-9][0-9][0-9]$

This one works as expected on the different online regexp tools I tried, however, it doesn't work in Angular validator, because of the leading 0 which is not counted as a digit:

  PIN = new FormControl('', [
    Validators.required,
    Validators.minLength(6),
    Validators.maxLength(6),
    Validators.pattern('^([0-9][0-9][0-9][0-9][0-9][0-9])$'),
  ]);

  formPINGroup = this.formBuilder.group({
    PIN: this.PIN,
  });

I can't figure this out despite the different forums I browsed, people are always looking for the opposite.

If an Angular expert sees this post, his help is welcomed!

In the meantime, take care!

EDIT:

I have created a Stackblitz if you wanna try something: https://stackblitz.com/edit/angular-zzsjn1

here three results:

the first is not OK because of the leading 0
second is ok because I added number 6, at the end
the last one is wrong, obviously.

I can't recreate your problem from your code. Can you provide a stackblitz? — Kurt Hamilton, Apr 22 '20 at 17:57
@ariel It could be, but that doesn't get to the root of what the problem is. — Kurt Hamilton, Apr 22 '20 at 18:09
Thanks guys for your help, I have updated my main question and I will try to create a Stackblitz if that can help. — Sébastien, Apr 22 '20 at 18:31
@Sébastien It would definitely help. There is no reason why this shouldn't be working — Kurt Hamilton, Apr 22 '20 at 18:45
@Sébastien could you give me a mock pin to test my solution, please? — tpbafk, Apr 22 '20 at 19:14
Sure, here the Stackblitz https://stackblitz.com/edit/angular-zzsjn1 — Sébastien, Apr 22 '20 at 19:50

Zwiers · Accepted Answer · 2020-04-22T20:23:09.877

0

The problem is an HTML5 input element. Try changing type="number" to type="tel" in hello-component.ts (from your link). With it you can technically still enter some non-numeric characters but only your pattern of 6 digits (with or without leading zeroes) will validate. See also this thread

edited Apr 22 '20 at 20:23

answered Apr 22 '20 at 20:12

Zwiers

3,040
2
12
18

Thank you Zwiers, you put me on the good way with that post. My solution in the end, is the following: – Sébastien Apr 22 '20 at 20:26
type="tel" pattern="[0-9]{6}" maxlength="6" – Sébastien Apr 22 '20 at 20:26

Angular 9 - Validators.pattern('^[0-9][0-9][0-9]$') doesn't match with leading 0 number like 012

1 Answers1