Angular2 - Why does my reactive form input with an html pattern attribute is not validating correctly?

Question

I'm struggling with a problem that I can't understand:

I need to validate an input field with a pattern="[0-9]+([,.][0-9])?" attribute on an angular reactive form with Validators.pattern, but it seems my ? quantifier at the end is not working...

What I want

I want to validate numbers with zero or one decimal maximum. As you can see on https://regex101.com/r/2D2sww/1, the regex is working great.

The actual problem

In my app I can enter as many decimals as I want without the Validator.pattern to do anything. Any other character invalidate the form, so my Validator is working.

Here is my code (simplified):

component.html

<form [formGroup]="myForm">
<input type="number" formControlName="myInputField" id="myInputField" pattern="[0-9]+([,.][0-9])?" required />
</form>

component.ts (Every import and declarations are skipped for clarity)

ngOnInit() {
  this.myForm = this.formBuilder.group({
      myInputField: [
          "",
          [Validators.required, Validators.pattern],
      ]
  });
}

I already tried to use Validators.pattern(/^[0-9]+([,.][0-9])?$/) and Validators.pattern("[0-9]+([,.][0-9])?") as pointed in the documentation, but it doesn't change anything, so I suspect my Regex to be incorrect...

Any ideas ? Thanks, have a nice day :)

You should not use the regex delimiters in a string regex pattern. pattern="/^[0-9]+([,.][0-9])?$/" => pattern="^[0-9]+([,.][0-9])?$" and even pattern="[0-9]+([,.][0-9])?". Then, it is a on-submit validation, not live validation. When the user submits the data, validation will trigger. — Wiktor Stribiżew
– Wiktor Stribiżew, Commented Apr 15, 2020 at 14:35
@wiktor-stribiżew I thought the second part of your comment was the key, as I already tried the first part (see the end of my question), but nope, Validators in angular reactive forms are live, not on submit. When I enter a letter in my fields, the Validator is working and sending an alert. So as I said, it's only the second part of my regex that is not working. Could you please re-open this question as it's not a duplicate? :/ — Socrapop
– Socrapop, Commented Apr 15, 2020 at 15:22

Shahar Shokrani · Accepted Answer · 2020-04-15 21:03:18Z

0

I think there is nothing wrong with your validator pattern regex, you can remove the pattern's attribute from the input, it is redundant because you are initiating it from inside the ts file: 'myInputField': new FormControl(null, [Validators.pattern('^[0-9]+([,.][0-9])?$')]).

StackBlitz

answered Apr 15, 2020 at 21:03

Shahar Shokrani

8,92010 gold badges60 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Socrapop Over a year ago

Well, I don't know what to say, this morning I tried again, I removed the input attribute and everything is working well... However, I tried to add back the input attribute to see if that was really the problem, and it's working... So yeah, there was nothing wrong, that was a magical error I guess, disturbing me for two consecutive days ;) Thank you for your trouble, I mark your answer as correct (as it it, nothing was wrong), even if the mystery persists :)

Shahar Shokrani Over a year ago

I truly believe it is related to the duplicated pattern attribute

Collectives™ on Stack Overflow

Angular2 - Why does my reactive form input with an html pattern attribute is not validating correctly?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related