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

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>