0

I have the following problem using Angular and the PrimeNG DropDown element, this one: https://www.primefaces.org/primeng/#/dropdown

Note before to start: as you can see in the previous page this element is always associated with a list whose first element is a fake label like "Select City", something like this:

this.cities1 = [
    {label:'Select City', value:null},
    {label:'New York', value:{id:1, name: 'New York', code: 'NY'}},
    {label:'Rome', value:{id:2, name: 'Rome', code: 'RM'}},
    {label:'London', value:{id:3, name: 'London', code: 'LDN'}},
    {label:'Istanbul', value:{id:4, name: 'Istanbul', code: 'IST'}},
    {label:'Paris', value:{id:5, name: 'Paris', code: 'PRS'}}
];

In my project I have something like this:

const AOO_LIST: Aoo[] = [
    { Name: 'AOO-1', Value: 'AOO-1' },
    { Name: 'AOO-2', Value: 'AOO-2' },
    { Name: 'AOO-3', Value: 'AOO-3' }
];

it directly contains the voices and I have not a first "select something" voice in my list. I prefear that it is automatically shown the first real element of my list.

But in this way I have a problem because I have something like this in my view:

<p-dropdown [options]="aooList"
            [(ngModel)]="selectedAoo"
            optionLabel="Name"
            (onChange)="onChangeAoo($event)">
</p-dropdown>

As you can see I have setted a method for the (onChange) event in this code (because when the user choose an element from this list some operation have to be performed and a second dropdown menu must be shown in the page).

It works fine if I select the second or the third element in this dropdown menu but the event is not performed if I select the first one because in my dropdown menu the first one is the default one so selecting it there is not a change and the onChange event is not triggered.

So...my question is: exist a way to recognize the selection of the first element (even if there is no real change) or the only solution is to insert a first "select an item" element in my list?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
AndreaNobili
  • 40,955
  • 107
  • 324
  • 596
  • just call ``onChangeAoo()`` and pass your first element as input to the function duringthe initialization . – CruelEngine Nov 15 '18 at 11:55
  • @CruelEngine the onChange event is not called if I click on the preloaded first element because I am not changing element in my dropdown. So the event is not triggered and the onChangeAoo is never called – AndreaNobili Nov 15 '18 at 11:57
  • use ``(ngModelChange)`` – CruelEngine Nov 15 '18 at 11:58
  • @CruelEngine same problem, nothing change. What is this ngModelChange event? I can't find it into the list of the events in the official documentation page https://www.primefaces.org/primeng/#/dropdown – AndreaNobili Nov 15 '18 at 12:02
  • ``[(ngModel)]`` is a combination of ``[ngModel]`` and ``(ngModelChange)`` . Use the ``(ngModelChange)`` to trigger whatever function you want to call . – CruelEngine Nov 15 '18 at 12:04
  • check this example : https://stackblitz.com/edit/angular-3mh4yz . This is what i meant by my first comment . – CruelEngine Nov 15 '18 at 12:15
  • @CruelEngine sorry but clicking on the first element of the list (the pre selected one) I can't see the log that should be print by the handler method – AndreaNobili Nov 15 '18 at 13:34

0 Answers0