How to get Select option dropdown text value using reactive form in Angular

Question

I'm trying to access the text as a value. Currently I'm able to retrieve the value but not the text.

<select id="firstName" formControlName="firstName" class="form-control">
  <option value="Not Selected" [disabled]="true" [selected]="true">Select</option>
  <option *ngFor="let fName of clientFileData.worksheets[0].columns" value={{fName.index}}>{{fName.name}}</option>
</select>

Using this.firstName.value I'm able to get the value which is fName.index but I also want to access the fName.name. How can I retrive that value eqivalent of $("#firstName:selected").text(); in jquery?

Abhishek Singh · Accepted Answer · 2017-11-21 13:55:13Z

2

I have tried this code and it worked for me try this in html use this code on select

<select id="firstName" formControlName="firstName" (change)="getName($event)"
 class="form-control">

and in ts file

getName(e:Event){
   const value:number =  parseInt((<HTMLSelectElement>event.srcElement).value);
   console.log((<HTMLSelectElement>event.srcElement.options[selectedIndex]text))
  }

Let me know if you it worked for you

answered Nov 21, 2017 at 13:55

Abhishek Singh

9107 silver badges21 bronze badges

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

Comments

Fiyaz Hasan · Accepted Answer · 2017-11-21 13:38:13Z

0

why don't you bind the value with fName instead of {{fName.index}}? doing so will give you the whole object and then you can find the name property inside of it. However, in Angular you can use @ViewChild to achieve similar to $("#firstName:selected").text();

answered Nov 21, 2017 at 13:38

Fiyaz Hasan

8487 silver badges10 bronze badges

Comments

Milo · Accepted Answer · 2017-11-21 13:38:44Z

0

I'm not sure of a simple way but you could have a (change) event in which you use the fName.index to iterate through your clientFileData array and find the equivalent name.

answered Nov 21, 2017 at 13:38

Milo

3,4539 gold badges32 silver badges44 bronze badges

Comments

Alexander Leonov · Accepted Answer · 2017-11-21 13:48:48Z

Simple. You need to go through the list of options you're rendering, find selected one by id and get the text from it. This is just the way HTML select works: I only give you id of the selected item, so, if you want its text then go figure it out yourself, be it jquery or plain javascript using selected index property or something else. BTW, I'm sure that jquery does something similar under the hood.

It is also possible to make angular binding work with the whole objects as a model rather than just their ids. This way you will be able to just get your text directly from the model that select is bound to. However, this will require you to provide custom value accessor and probably a bit of some other stuff. It may sound scary at first but it should not be very complicated.

Rahul Dagli · Accepted Answer · 2017-11-23 10:15:41Z

0

I just found a simple solution although it only works if the option list doesn't contains comma which works in my case.

<select id="firstName" formControlName="firstName" class="form-control">
  <option value="Not Selected" [disabled]="true" [selected]="true">Select</option>
  <option *ngFor="let fName of clientFileData.worksheets[0].columns" value={{fName.index}},{{fName.name}}>{{fName.name}}</option>
</select>

This will return index with name in a string. Eg: "1,John Doe".

Then we can manipulate the comma separated string using split method.

console.log('Index: ' + this.firstName.value.split(',')[0]);
console.log('Name: ' + this.firstName.value.split(',')[1]);

edited Nov 23, 2017 at 10:15

answered Nov 21, 2017 at 14:02

Rahul Dagli

4,52216 gold badges53 silver badges89 bronze badges

Collectives™ on Stack Overflow

How to get Select option dropdown text value using reactive form in Angular

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related