Angular2 + PrimeNG - Dropdown selected value not working properly if Editable is set

Question

I have an Angular2 application with PrimeNG suite installed.

I'm trying to implement a form with a primeNG dropdown component.

The problem happens when I run the application and I select an element from the listbox.

Instead of shows the value, it shows [object Object]

the problem

html component

 <p-dropdown [options]="listCustomers_itm" placeholder="Selezionare" formControlName="Customer_itm" [(ngModel)]="Customer_itm" filter="filter" editable="editable"> </p-dropdown>

declarations

 /*primeng listBox */
  Customer_itm: SelectItem;
  listCustomers_itm: SelectItem[];

ts code to fill the options:

this.mdService.Get_Customer(false).subscribe(
      data => {
        this.listCustomers = data;

        this.listCustomers_itm = [];
        for (let c of this.listCustomers) {
          this.listCustomers_itm.push({ label: (c.code + ' - ' + c.businessName), value: { id: c.idCustomer, name: c.businessName, code: c.code } });
        }

      }
    );

If instad of use custom label and value, is use flat values like:

this.listCustomers_itm.push({ label: c.code, value:c.businessName });

All works properly...

I tried also to implement onChange function:

  onCustomerSelect(e)
  {   
    console.log(e);        
  }

The ouput in the console when I select an item is:

Object { id: 5, name: "Luigino Gatto", code: "5" }

I finally discovered that the code works properly if I remove editable="editable" attribute, but I need to set it editable...

Thanks to support

might be because you are instancing listCustomers_itm inside you subscription. — Aravind
Try to log the object that you are pushing it to listCustomers_itm — Gangadhar JANNU
can you post the Stringified version of this.listCustomers_itm after the for loop? — Gangadhar JANNU
Even I discovered that everything is working fine if i remove formControlName property — Gangadhar JANNU

Amit Amit · Accepted Answer · 2017-05-10T09:46:25

Instead of pushing individual values in the value you can put the entire object in it.

this.mdService.Get_Customer(false).subscribe(
  data => {
    this.listCustomers = data;

    this.listCustomers_itm = [];
    for (let c of this.listCustomers) {
      this.listCustomers_itm.push({ label: (c.code + ' - ' + c.businessName), value: c });
    }

  }
);