p-inputNumber 按钮 - 使用向下箭头时输入值为空

Question

我使用 p-inputNumber 按钮来允许用户为表列选择过滤器值。

不幸的是，如果我使用向下箭头并选择值 0，则鼠标事件不会被触发并且输入值为空。

但是，如果我手动输入值 0 或者如果第一次使用向上箭头选择值 1，然后使用向下箭头并选择 0，则会触发鼠标事件并且输入值为 0。

我认为问题是没有检测到从 null 到 0 的变化。 有什么想法可以解决这个问题吗？

<p-inputNumber
    [ngModel]="value"
    (onInput)="onNumericChange($event, filterConstraint, false)"
    placeholder="Search"
    [showButtons]="true"
    [min]="0"
></p-inputNumber>

onNumericChange(ev: any, filter: any, isNumber: boolean) {
    const pattern = /^[0-9]+\|$/
    if (isNumber) {
        if (!pattern.test(ev.target.value)) {
            ev.target.value = ev.target.value.replace(/[^0-9\|]/g, '')
        }
        filter.value = ev.target.value
    } else {
        filter.value = ev.value
    }
}

Answer 1

要同步值更改，您应该使用

[(ngModel)]="value"

。如果没有

(ngModel)

，则不会检测或更新值更改。

<p-inputNumber
    [(ngModel)]="value"
    placeholder="Search"
    [showButtons]="true"
    [min]="0"
  ></p-inputNumber>

p-inputNumber 组件会自动过滤输入，仅允许数字值，忽略非数字字符。这意味着不需要额外的验证功能来检查输入的值。

演示🌟