Angular2 select box passing object as a string

Question

I am currently building some functionality in an Angular2 component where an array of objects is looped through to create the options for a form select box.

I have this working and when the select box option is changed I call a handler function which I intend to pass the chosen option through to.

The problem I am having at the moment is that I cannot get the object to pass through from the view to the controller. The object is passed though as a string:

[object object]

Here is my code:

view:

        <div class='searchbar-wrapper'>
            <h5>MANUFACTURER</h5>
            <select class='manufacturers' #m [(ngModel)]="selectedManufacturer" (change)="changeManufacturer(m.value)">
                <option>-- please select --</option>
                <option *ngFor="let manufacturer of manufacturers" [ngValue]="manufacturer">{{manufacturer.name}}</option>
            </select>
        </div>

controller:

changeManufacturer(manufacturer) {
    this.productsLoaded = false;
    this.selectedManufacturer = manufacturer;
    this.productPayload.manufacturer = manufacturer.id;
    this.getProducts();
}

As you can see, I am trying to pass the object through to the controller but this isn't working. Can anyone suggest as to why it is getting passed through as as string?

Thankss

I would suggest you to use manufacturer.id as ngValue and then you can use that id to set the correct SelectedManugacturer from manfacturers list/Array in your class. It would be optimal. — Jeet
– Jeet, Commented Sep 16, 2016 at 12:23
Thanks for your reply. I have tried that but I still get this back as a string: "13: 13" — James
– James, Commented Sep 16, 2016 at 12:43

James · Accepted Answer · 2016-09-16 13:08:10Z

1

I managed to get this working my changing the following line from:

<select class='manufacturers' #m [(ngModel)]="selectedManufacturer" (change)="changeManufacturer(m.value)">

to:

<select class='manufacturers' [(ngModel)]="selectedManufacturer" (ngModelChange)="changeManufacturer($event)">

answered Sep 16, 2016 at 13:08

James

2,8807 gold badges51 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular2 select box passing object as a string

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related