CODEWITHSUNDEEP
angulardropdownprimeng
DarioN1
DarioN1

Reputation: 2552

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

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

enter image description here

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

Upvotes: 2

Views: 12429

Answers (3)

john Smith
john Smith

Reputation: 1605

from your template it looks like to trying to work with model driven (formcontrolName) and template driven (ngModel) approach.

which does not make sense.

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

Please select the appropriate why and use it correctly.

Upvotes: 2

Lewis Campbell
Lewis Campbell

Reputation: 353

I was having the same issue. From what I can tell, when provided with an object as a value, the p-dropdown component will call value.toString().

In order to fix this, I added the following method to the object I wanted in the value field.

toString() : string{
  return this.name.toString();
}

Just to clarify as to why I'm using name.toString() - Prime likes to work with Typescripts primitive string rather than the wrapper object String.

Upvotes: 1

Amit
Amit

Reputation: 383

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 });
    }

  }
);

Upvotes: 2

Related Questions