仅适用于数字数组的Prime-NG P-CHIPS数字

Question

如何使用p-chips组件强制用户只输入数字？

我想从用户输入中填充numbers数组。

除了p-chips组件之外，还有其他方法可以实现这一点吗？

Answer 1

通过使用p-chips组件，可以使用onAdd方法检查用户输入：

HTML

<p-chips [(ngModel)]="values" (onAdd)=checkInput($event)></p-chips>

TS

  checkInput(event) {
    this.errorMessage = ''; // reinitialize error message

    if(!this.isInt(event.value)) {
      this.errorMessage = event.value + ' is not an integer !'; // display error message
      this.values.pop(); // remove last entry from values
    }
  }

请参阅Plunker

Answer 2

或者，您可以像这样访问chips组件的input元素，并将输入类型更改为number；

<p-chips #chips></p-chips>

@ViewChild('chips', { static: true}) chips: Chips;

ngAfterViewInit() {
    (this.chips.inputViewChild.nativeElement as HTMLInputElement).type = "number";
}