0

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 :)

Socrapop
  • 196
  • 1
  • 9
  • 1
    You [should not](https://stackoverflow.com/a/23433521/3832970) 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 Apr 15 '20 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 Apr 15 '20 at 15:22

1 Answers1

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

Shahar Shokrani
  • 7,598
  • 9
  • 48
  • 91
  • 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 :) – Socrapop Apr 16 '20 at 10:36
  • I truly believe it is related to the duplicated pattern attribute – Shahar Shokrani Apr 16 '20 at 10:45