1

I have a dropdown select,Here on click the button I need to console selected text(green..) and selected value(1..) ,I tried with ngmodel but I can able to capture only value and also empty option is showing there in select field.Here is the code below,

home.component.html

<select>
<option *ngFor="let status of statusdata" value="{{status.id}}">{{status.name}}</option>
</select>
<button type="submit" (click)="register()" class="btn btn-primary mr-1">Register</button>

home.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit { 
    dotsh:any;
    hoverIndex:number = -1;
    groups:any;
    test:any;
 constructor(private formBuilder: FormBuilder) {


     }
     onHover(i:number){
 this.hoverIndex = i;
}
     columns = ["name", "Items","status"];



  ngOnInit() {
      this.test = false;
      this.statusdata = [{"id":1,"name":"green"},{"id":2,"name":"red"},{"id":3,"name":"yellow"}];
} 

register(){
    console.log('selected Value');
    console.log('selected name');
}


}
UIAPPDEVELOPER
  • 583
  • 5
  • 18
  • 37

2 Answers2

1

If what you want is to store the whole object as a value when selected, you can try this:

<select [(ngModel)]="value">
  <option *ngFor="let status of statusdata" [ngValue]="status"> 
   {{status.name}}</option>
</select>

And then in your component just declare the variable value, and either leave it undefined or assign it to the value you wish (it needs to be the whole object). For instance:

export class HomeComponent implements OnInit { 
  statusdata = [{"id":1,"name":"green"},{"id":2,"name":"red"},{"id":3,"name":"yellow"}];
  value = statusdata[0];
  ....

That should default to the first option selected. Then if you want to print the value just:

console.log(this.value.id);
console.log(this.value.name);
David G.
  • 1,255
  • 9
  • 16
  • Thanks for your answer,suppose if you change the option and and then press button,that time also it should show selected value,it showing same value because its hardcoded this.statusdata[0] – UIAPPDEVELOPER Oct 24 '19 at 19:35
  • You are not hardcoding the value, you are just supposed to set it on init. Have a look at this example: https://stackblitz.com/edit/angular-mkdakz?file=src%2Fapp%2Fapp.component.ts – David G. Oct 24 '19 at 19:44
  • thanks for your answer – UIAPPDEVELOPER Oct 24 '19 at 19:49
0

To achieve expected result, use below option of using Formbuilder, FormGroup and Form Control name in component.html and commponent.ts

component.html

  1. Use form name for your form as [formGroup]="profileForm"
  2. Set formControlName for select i.e formControlName="name"

`component.ts
3. Declare formgroup and using formbuilder initialize name

profileForm: FormGroup
 constructor(private formBuilder: FormBuilder) {
this.profileForm = this.formBuilder.group({
    name: new FormControl(1)
});

4. On button click get value using this.profileForm.get('name').value

register(){
    console.log('selected Value', this.profileForm.get('name').value);
    console.log('selected name', this.statusdata.filter(v => v.id == this.profileForm.get('name').value)[0].name);
}

Sample working code for reference - https://stackblitz.com/edit/angular-unnal4?file=src/app/app.component.ts

Please refer this link for more details on reactive forms - https://angular.io/guide/reactive-forms

Naga Sai A
  • 10,771
  • 1
  • 21
  • 40