PrimeNG：手动输入时未触发 p-inputNumber onInput

Question

我使用的是 PrimeNG 版本 10.0.2

使用组件 p-inputNumber，手动修改值时不会触发 onInput 事件。当我使用微调按钮时，它工作正常。

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>

组件代码：

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

Answer 1

更新 changePage 以从 $event 中获取值，然后您将获得您输入的当前值

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

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

demo

另一种选择是使用 ngModelChange 事件

<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 ‍

PrimeNG：手动输入时未触发 p-inputNumber onInput

PrimeNG: p-inputNumber onInput not fired on manual input

events

primeng

angular