DropDownlist Selected text when Submit button click in Angular 6

Question

I want to get the selected text in Angular when I select an item in Dropdownlist.

Please Note that I want to get the text without any onchange event in Dropdownlist. I use query selector to get the value of Dropdownlist and event is button and button inside form tag. Here is my code

const ddldepartment = target.querySelector('#ddldepartment').value;
const ddldesignation = target.querySelector('#ddldesignation').value;

Here I get the value like 1 and 2 not getting the text. and I am using

<form (submit)="PostEmployee($event)">

and

PostEmployee(event) {
    const ddldepartment = target.querySelector('#ddldepartment').value;
    const ddldesignation = target.querySelector('#ddldesignation').value;
}

Here is my HTML Code for the dropdownlist:

<select id="ddldepartment" [(ngModel)]="ddldepartment" name='ddlbankcode' style="width: 70%">
    <option value=0>Choose...</option>
    <option class='option' *ngFor="let dept of department" [value]="dept.dept_code">
      {{dept.dept_name}}
    </option>
</select>

I got value in console. I want to get text. How can I find it?

can you update your html code? – Abhishek Ekaanth Oct 29 '18 at 06:46 — Abhishek Ekaanth, Oct 29 '18 at 06:46
Hello Please check I update the dropdownlist HTML – Rifat Murtuza Oct 29 '18 at 06:49 — Rifat Murtuza, Oct 29 '18 at 06:49
Try using `innerHTML` property – Sarthak Aggarwal Oct 29 '18 at 06:53 — Sarthak Aggarwal, Oct 29 '18 at 06:53
Check this answer: https://stackoverflow.com/a/5947/6080889 – dRoyson Oct 29 '18 at 06:54 — dRoyson, Oct 29 '18 at 06:54

SiddAjmera · Answer 1 · 2018-10-29T07:18:17.250

You're already using [(ngModel)]="ddldepartment". So you'll already have the selected value in the ddldepartment property.

All you need to do is use [ngValue]="dept.dept_name"

Like this:

<form (submit)="postEmployee()">
  ...
  <select 
    id="ddldepartment" 
    [(ngModel)]="ddldepartment" 
    name='ddlbankcode'>
    <option value='null'>Choose...</option>
    <option 
      class='option' 
      *ngFor="let dept of department" 
      [ngValue]="dept.dept_name">
      {{ dept.dept_name }}
    </option>
  </select>
  ...
  <button>Submit</button>
</form>

So in your Class:

postEmployee() {
  // This will give you the selected department name text
  console.log(this.ddldepartment);
}

Here's a Sample StackBlitz for your ref.

DropDownlist Selected text when Submit button click in Angular 6

1 Answers1