Access value of option in select and pass it to function - Angular 5

Question

I have an angularForm and a combobox which is filled with options from the database. I need to get the selected option and pass it to a function on button click

<div class="form-group">
    <select class="form-control" formControlName="product" #product>
        <option *ngFor="let product of products" [value]='product'>{{product.name}}</option>
    </select>
</div>

<div class="form-group">
    <button (click)="addFeature(name.value, description.value,product.value)" [disabled]="angForm.pristine || angForm.invalid" class="btn btn-primary">Add</button>
</div>

When I click the button and console.log product.value I get [object,object], how to fix this?

addFeature(name, description, product) {
    console.log(product);
    // this.featureservice.addFeature(name, description,product);
    // this.router.navigate(['/features/index']);
    // location.reload();
}

UPDATE

The values in the combobox are filled by:

ngOnInit() {
    this.getProducts();
}

getProducts() {
    this.productservice.getProducts().subscribe(res => {
        this.products = res;
    })
}

try this [value]='product.value' – Shoyeb Memon Apr 24 '18 at 09:40 — Shoyeb Memon, Apr 24 '18 at 09:40

Sajeetharan · Accepted Answer · 2018-04-24T09:48:43.557

3

You are getting the whole object, if you need name or description , access it as

addFeature(name, description, product) {
  console.log(product.name);
}

EDIT

You can use ngModel and access the variable directly

<select class="form-control" [(ngModel)]="selectedProduct" formControlName="product" #product>
        <option *ngFor="let product of products" [value]='product'>{{product.name}}</option>
</select>

and you can access it as,

addFeature() {
  console.log(this.selectedProduct);
}

edited Apr 24 '18 at 09:48

answered Apr 24 '18 at 09:37

Sajeetharan

216,225
63
350
396

can you try what you get when you put console.log(JSON.stringify(product)) and post here – Sajeetharan Apr 24 '18 at 09:40
{"0":{},"1":{},"__zone_symbol__changefalse":[{"type":"eventTask","state":"scheduled","source":"HTMLSelectElement.addEventListener:change","zone":"angular","runCount":2}],"__zone_symbol__blurfalse":[{"type":"eventTask","state":"scheduled","source":"HTMLSelectElement.addEventListener:blur","zone":"angular","runCount":2}]} – Lars Suffys Apr 24 '18 at 09:46
is what i get when – Lars Suffys Apr 24 '18 at 09:46
check updadted answer – Sajeetharan Apr 24 '18 at 09:48
did it fix the issue – Sajeetharan Apr 24 '18 at 10:11
no still didnt fix it :'( I forgot to add in my question that the values in the select are filled by ngOnInit() { this.getProducts(); } getProducts() { this.productservice.getProducts().subscribe(res => { this.products = res; }) } – Lars Suffys Apr 24 '18 at 10:13
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/169663/discussion-between-lars-suffys-and-sajeetharan). – Lars Suffys Apr 24 '18 at 10:16

score 1 · Answer 2 · answered Apr 24 '18 at 10:01

Bind to ngValue instead value of the option tag:

<div class="form-group">
  <select class="form-control" formControlName="product" #product>
    <option *ngFor="let product of products" [ngValue]='product'>{{product.name}}</option>
  </select>
</div>

See Differences between value and ngValue in Angular 5 for more info.

score 0 · Answer 3 · answered Apr 24 '18 at 09:48

I don't get your doubt precisely but try to change your select tag to something like so:

<select class="form-control" formControlName="product" #product>
   <option *ngFor="let product of products" [value]='product.value'
       {{product.name}}
   </option>
</select>

score 0 · Answer 4 · answered Apr 24 '18 at 12:02

I found the solution myself

    <select class="form-control" [(ngModel)]='selectedOption' formControlName="product" #product>
        <option *ngFor="let product of products" [ngValue]='product'>{{product.name}}</option>
      </select>

    <button (click)="addFeature(name.value, description.value,selectedOption.name)" [disabled]="angForm.pristine || angForm.invalid" class="btn btn-primary">Add</button>

Access value of option in select and pass it to function - Angular 5

4 Answers4