PatternValidator directive doesn't validate when the correct regex string value is passed to it

Question

I have an input field whose input should be a positive number.

    <input  type="number" [(ngModel)]='assetValue'
     type="number" pattern="positiveNumberRegex">

positiveNumber() returns a RegExp. I store it's string value in a variable. This is done in the OnInit Life cycle hook.

this.positiveNumberRegex = this.regexPatternService.positiveNumber().source;
console.log(this.positiveNumberRegex); // ^[1-9][0-9]*[.]?[0-9]*$

But the validation fails when I enter a positive number.

If I hardcode the regex to the pattern directive, it works fine.

    <input  type="number" [(ngModel)]='assetValue'
     type="number" pattern="^[1-9][0-9]*[.]?[0-9]*$">

What is the reason for this?

Sachila Ranawaka · Accepted Answer · 2019-02-08 09:53:23Z

2

use the [] around pattern to support the binding.

 [pattern]="positiveNumberRegex">

answered Feb 8, 2019 at 9:53

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

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

1 Comment

Thank you It worked! But why did it work with the hardcoded value earlier?

Qellson · Accepted Answer · 2019-02-08 10:01:55Z

0

[pattern] brackets tell angular to read whats in the expression positiveNumberRegex, without the brackets it treats it as a regular string

answered Feb 8, 2019 at 10:01

Qellson

5522 silver badges7 bronze badges