如何通过PrimeNG p-chips组件限制仅输入数字并填充数字数组？及替代方案

要实现p-chips强制输入数字并填充数字数组，你可以通过输入验证和事件拦截结合的方式来实现，具体步骤如下：

1. 模板配置与事件绑定 #

首先在模板中设置p-chips，绑定数据模型，并添加两个关键事件：onBeforeAdd（拦截新增项前验证）和keydown（限制输入框仅能输入数字相关按键）：

<p-chips 
  [(ngModel)]="numberArray" 
  (onBeforeAdd)="validateAndTransformNumber($event)"
  (keydown)="restrictNonNumberKeys($event)"
  placeholder="输入数字后按回车添加"
></p-chips>

2. 组件逻辑实现 #

在组件类中编写验证和按键拦截的方法，确保只有有效数字能被添加，且数组中存储的是数字类型而非字符串：

import { Component } from '@angular/core';

@Component({
  selector: 'app-number-chips',
  templateUrl: './number-chips.component.html'
})
export class NumberChipsComponent {
  numberArray: number[] = [];

  // 验证新增项是否为有效数字，转换为数字类型
  validateAndTransformNumber(event: any) {
    const inputValue = event.value.trim();
    // 用正则匹配正整数，若需支持小数可改为 /^\d+(\.\d+)?$/
    if (!/^\d+$/.test(inputValue) || isNaN(Number(inputValue))) {
      event.preventDefault(); // 阻止非数字项被添加
      // 可选：添加Toast提示用户输入无效
      // this.messageService.add({severity:'error', summary:'错误', detail:'请输入有效数字'});
    } else {
      // 将字符串转换为数字，确保数组中存储数字类型
      event.value = Number(inputValue);
    }
  }

  // 拦截非数字相关按键，避免输入非法字符
  restrictNonNumberKeys(event: KeyboardEvent) {
    // 允许数字键、退格、删除、方向键、Tab键
    const allowedKeys = ['0','1','2','3','4','5','6','7','8','9','Backspace','Delete','ArrowLeft','ArrowRight','Tab'];
    if (!allowedKeys.includes(event.key)) {
      event.preventDefault();
    }
  }
}

如果p-chips的灵活性不能满足需求，你可以考虑以下几种更可控的实现方式：

1. 输入框+添加按钮组合 #

使用PrimeNG的p-inputNumber配合按钮，手动管理数字数组：

<p-inputNumber [(ngModel)]="currentNumber" mode="decimal"></p-inputNumber>
<button pButton label="添加" (click)="addNumberToArray()"></button>

<!-- 展示已添加的数字 -->
<div *ngFor="let num of numberArray; let i = index">
  {{num}} <button pButton icon="pi pi-times" (click)="removeNumber(i)"></button>
</div>

组件逻辑：

currentNumber: number | null = null;
numberArray: number[] = [];

addNumberToArray() {
  if (this.currentNumber !== null) {
    this.numberArray.push(this.currentNumber);
    this.currentNumber = null;
  }
}

removeNumber(index: number) {
  this.numberArray.splice(index, 1);
}

这种方式完全可控，还能自定义展示和删除逻辑。

2. 使用p-listbox动态管理 #

用p-listbox结合输入框，实现可编辑的数字列表：

<p-inputNumber [(ngModel)]="newNumber"></p-inputNumber>
<button pButton label="添加" (click)="addToNumberList()"></button>

<p-listbox 
  [options]="numberArray" 
  [(ngModel)]="selectedNumbers" 
  [style]="{'width':'100%'}"
  selectionMode="multiple"
></p-listbox>

适合需要批量选择或管理数字列表的场景。

3. 原生HTML+自定义逻辑 #

如果不需要PrimeNG组件，也可以用原生的<input type="number">配合简单的JS逻辑实现，轻量化且灵活。

内容的提问来源于stack exchange，提问作者Kishor Prakash