Cannot enter decimal point in primeNG p-columnFilter

user_2993106 0
Viewed 408

I am using p-table and p-columnFilter components in a modal in my angular project.

I am using the following libraries:

"primeflex": "^2.0.0",
"primeicons": "^4.1.0",
"primeng": "^11.2.0",
"@angular/cli": "^11.2.5",

here my HTML:

<th>
    <div class="flex justify-content-center align-items-center">
            Pressure ({{pressureUnits}})
        <p-columnFilter type="numeric" field="tyre_pressure" display="menu">
        </p-columnFilter>
    </div>
</th>

Except for the input generated inside the p-column, everything is good. Only numbers can be entered into the filter, not decimals.

Typing 56.8 into the input or paste 56.8 into the input does not work.

enter image description here

** SOLUTION ** using yoelb00 answer this is the code that worked:

<div class="flex justify-content-center align-items-center">
    Pressure ({{pressureUnits}})
    <p-columnFilter field="tyre_pressure" matchMode="equals" display="menu">
        <ng-template pTemplate="filter" let-value let-filter="filterCallback">
            <input type="number" pInputText [ngModel]="value" (ngModelChange)="filter($event)" class="p-inputtext">
        </ng-template>
    </p-columnFilter>
</div>
primeng
3 Answers

You can use ng-template and you can write your own input, it will solve your problem

  <p-columnFilter type="number" field="tyre_pressure" display="menu">
    <ng-template pTemplate="filter" let-value let-filter="filterCallback">
                    <input type="number" pInputText [ngModel]="value" (ngModelChange)="filter($event)" class="p-inputtext"> </ng-template>
  </p-columnFilter>
user_135683820

You can use pipes like the currency in the following example

Price <p-columnFilter type="numeric" field="finalPrice" display="menu" currency="SAR"></p-columnFilter> <p-sortIcon field="finalPrice"></p-sortIcon>
user_17695630

There are two input parameters for p-columnFilter component you could use. These are minFractionDigits and maxFractionDigits. If you provide them you should be able to type decimal values. Please see example below:

    <p-columnFilter
      type="numeric"
      [minFractionDigits]="2"
      [maxFractionDigits]="2"
      field="outcomePriceYes"
      display="menu"
      class="p-ml-auto"
    ></p-columnFilter>
user_38251340
Related