I have an angularForm and a bobox 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 bobox are filled by:

ngOnInit() {
    this.getProducts();
}

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

I have an angularForm and a bobox 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 bobox are filled by:

ngOnInit() {
    this.getProducts();
}

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

• javascript
• angular

• try this [value]='product.value' – Shoyeb Memon Commented Apr 24, 2018 at 9:40

4 Answers 4

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

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.

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>

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>