Primeng KeyFilter not working well

Question

i am using KeyFilter Module of primeng here is my code :

<input type="text" pInputText [(ngModel)]="price.TintCost" [pKeyFilter]="patternDecimal" name="tintCost" required="true" />

here is my typescrip code :

patternDecimal: RegExp = /^[0-9]+(\.[0-9]{1,2})?$/;

and here is version of primeng :|

"primeng": "^5.2.0-rc.1",

i tested in regex then i can type dot(.) but when i apply to KeyFilter, it doesn't allow the dot(.). Someone help me, please

Primeng KeyFilter regexp works apparently on single characters: the expression is applied on every character when entered. You can't specify entire masks. — Markus Pscheidt, Dec 12 '18 at 11:13

score 1 · Answer 1 · answered Mar 06 '18 at 14:22

1

I solved this problem by adding a mask as default

KeyFilter.DEFAULT_MASKS['currencyRegex'] =  /^-?(?:0|[1-9]\d{0,2}(?:,?\d{3})*)(?:\.\d+)?$/;

answered Mar 06 '18 at 14:22

Denis Soares Moreira

11
1

score 1 · Answer 2 · answered Jun 19 '20 at 20:26

I solved this problem by change the pValidateOnly property to true. The problem is that the KeyFilter check any press on keyboard and if the complete value is no the correct, then dont permit write, just if you copy and paste the value. In the documentation say

Instead of blocking a single keypress, the alternative validation mode which is enabled with pValidateOnly property validates the whole input with a built-in Angular validator. https://www.primefaces.org/primeng-6.1.6/#/keyfilter

Example that work for me.

Component.ts

public twoDecimal: RegExp = /^\s*-?(\d+(\.\d{1,2})?|\.\d{1,2})\s*$/

Component.html

<input name="decimalField"
        #decimalField="ngModel"
        [pKeyFilter]="twoDecimal" 
        [pValidateOnly]="true" 
        [(ngModel)]="item.decimalField" 
        type="text" pInputText>

<div  *ngIf="!decimalField.valid" class="alert alert-danger">
    <p>Incorrect format.</p>
</div>

score 0 · Answer 3 · answered May 16 '22 at 09:27

The answer of @Norberto Quesada is correct.

Without pValidateOnly the regex will validate on every key stroke.

Let's say you want to enter the value "47.11":

You begin to enter "4" => this would be valid, no input blocked.
Same for "47"
As soon as you enter "47. => validation fails, input blocked.

I was thinking maybe it's possible to enter "4711" first and then the "." in between but for some reason this doesn't seem to work, too... Maybe this is a bug?

Anyways, you can take a look at this stackblitz example for better understanding.

I've also prepared an example of using ValidateOnly and in addition to that restrict the input to only numbers using keyDown event

Primeng KeyFilter not working well

3 Answers3

Linked