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

Answer 1

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

1. You begin to enter "4" => this would be valid, no input blocked.
2. Same for "47"
3. 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

Answer 2

I solved this problem by adding a mask as default

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

Answer 3

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>