PrimeNG: p-inputNumber onInput not fired on manual input

user_5838942 0
Viewed 5524

I am using PrimeNG version 10.0.2

Using component p-inputNumber, the onInput event isn't fired when the value is modified manually. It works normally when I use the spinner buttons.

HTML:

<p-inputNumber
    [(ngModel)]="currentPage"
    [showButtons]="true"
    buttonLayout="horizontal"
    spinnerMode="horizontal"
    [step]="1"
    size="2"
    incrementButtonIcon="pi pi-angle-right"
    decrementButtonIcon="pi pi-angle-left"
    [min]="1"
    [max]="maxPages"
    (onInput)="changePage()"
  >
  </p-inputNumber>

Component code:

export class MyComponent {
  
  currentPage = 1;
  maxPages = 100;
  ...
  changePage() {
    console.log(this.currentPage);
  }
}
primeng angular events
1 Answers

update the changePage to take the value from $event then you will get the current value you have entered

<p-inputNumber
    [(ngModel)]="currentPage"
     ...
    (onInput)="changePage($event.value)"
  >
  </p-inputNumber>


  changePage(val) {
    console.log(val);
  }

demo

another option is to use ngModelChange event

<p-inputNumber
    [(ngModel)]="currentPage"
     ...
    (ngModelChange)="changePage()"
  >
  </p-inputNumber>

the only different is the ngModelChange will fire on blur when you change the value manually but it will work normally when you click on the buttons

demo ‍

user_39806210
Related