How to have p-dropdown editable with only numbers, without listeners..

[acharugulla]

I have requirement to have a editable primeng dropdown. The editable field is allowing all the letters , numbers. I cant use listener or regex to restrict it. While trying mode="decimal" it doesn't work on drop down which it works on p-inputNumber

Any pointers how to achieve with primeng.

<p-dropdown
[options]="cities"
[(ngModel)]="selectedCity"
placeholder="Select a City"
[editable]="true"

import { Component, OnInit } from '@angular/core';
import { ImportsModule } from './imports';
interface City {
name: string;
code: string;
}

@component({
selector: 'dropdown-checkmark-demo',
templateUrl: './dropdown-checkmark-demo.html',
standalone: true,
imports: [ImportsModule],
})
export class DropdownCheckmarkDemo implements OnInit {
cities: number[] | undefined;

selectedCity: number | null = null;

ngOnInit() {
// Correctly referencing the cities array using 'this'
this.cities = [1, 2, 3, 4, 5];
}
}

[qwadrox]

Hi @acharugulla

I don't entirely understand what you were trying to achieve, but as I understood, you would like to allow only numbers in the editable dropdown field. Which is possible, here is a demo how you can do it:

https://stackblitz.com/edit/xhvy23?file=src%2Fapp%2Fdropdown-editable-demo.ts

You can specify a custom id for the embedded input, and you can access that with a document method and attach a listener. I only allow numbers, but you can change that as you wish.

[acharugulla]

yes [editable]="true" will make dropdown editable
Thanks