Get selected option value on change event in Angular

Question

I'm using Angular's reactive form in order to submit form data. I want to be able to access selected option value from one of my inputs similar to how I currently do when I submit the form.

(ngSubmit)="onSubmit(searchForm.value)"

Notice the filters array:

However when I make a selection change I cannot get the same result, as event.target.value logs 3: Object

HTML:

<div class="col-md-2" *ngFor="let filter of this.filters; index as i" formArrayName="filters" >
          <div class="form-group">
            <select [formControlName]="i" (change)="onSelectChange($event.target.value)" size="5" class="form-control" multiple>
              <option [ngValue]="null" value="-1" disabled class="first-option-item">{{ filter.name }}</option>
              <option
                *ngFor="let filterValue of this.filterValues[i].items"
                [ngValue]="{
                  filterHeader: { id: filter.id, value: filter.name },
                  filterSelections: { id: filterValue.id, value: filterValue.name }
                }">
                {{filterValue.name}}
              </option>
            </select>
          </div>
        </div>

What am I doing wrong?

Can you create stackblitz? – Chellappan வ Mar 18 '20 at 13:44 — Chellappan வ, Mar 18 '20 at 13:44
https://stackblitz.com/edit/angular-xm5vhf – shAkur Mar 18 '20 at 14:01 — shAkur, Mar 18 '20 at 14:01

score 3 · Answer 1 · edited Mar 19 '20 at 13:44

3

I managed to get the selected option value adding (ngModelChange) to select element and [ngValue] for the options. It wasn't necessary to add [(ngModel)] too.

<select [formControlName]="i" (ngModelChange)="onSelectChange($event)" size="5" class="form-control" multiple>
    <option [ngValue]="null" value="-1" disabled class="first-option-item">{{ filter.name }}</option>
    <option *ngFor="let filterValue of this.filterValues[i].items" [ngValue]="filterValue">
        {{filterValue.name}}
    </option>
</select>

edited Mar 19 '20 at 13:44

Max

1,368
4
18
43

answered Mar 19 '20 at 07:22

shAkur

944
2
21
45

If you only use the `$event` to get the selected value, I suggest to bind the value directly to `[(ngModel)]`, this makes your code more readable. – Max Mar 19 '20 at 12:52

score 1 · Answer 2 · answered Mar 18 '20 at 13:46

I suggest you store the selected value in an extra variable. And use the [(value)] binding within your template, but currently I am not sure if this works for the native select. I use this with my anuglar-material components.

<select [formControlName]="i" (change)="onSelectChange($event.target.value)" size="5" class="form-control" multiple>
    <option [ngValue]="null" value="-1" disabled class="first-option-item">{{ filter.name }}</option>
    <option
        *ngFor="let filterValue of this.filterValues[i].items"
        [ngValue]="{
            filterHeader: { id: filter.id, value: filter.name },
            filterSelections: { id: filterValue.id, value: filterValue.name }
        }">
      {{filterValue.name}}
    </option>
</select>

Another solution is to use [(ngModel)] with (ngModelChange)="yourfunction", this post might be helpful.

<select [(ngModel)]="selectedItem" (ngModelChange)="onChange($event)">

Get selected option value on change event in Angular

2 Answers2