Can't get value of select in Angular 7

Question

This is my html:

<form class="row" (ngSubmit)="generatePdfFromOverview()" #generatePdfForm="ngForm">
    <select id="selectedSortOnItem" required [(ngModel)]="generatePdfForm.selectedSortOnItem"
        name="selectedSortOnItem" #selectedSortOnItem="ngModel">
            <option *ngFor="let sortOnItem of sortOnItems" [value]="sortOnItem">{{sortOnItem}}</option>
    </select>
    <button type="submit" class="btn btn-primary">Generate it!</button>
</form>

The values are showing fine in the view.

However the value is not updated in the .ts file when I select another one. Tried numerous things. Followed the example in the Angular docs but does not seem to work..

Take a look at this Question, it looks similar to your problem: https://stackoverflow.com/questions/46447459/get-value-from-select-option-in-angular-4 — Teun van der Wijst, Nov 20 '18 at 14:04

SiddAjmera · Answer 1 · 2018-11-20T14:15:59.390

Although it completely depends on your generatePdfFromOverview method, there are a few things that you can do to fix this issue:

Pass generatePdfForm to the generatePdfFromOverview as an argument and then use the value property on it to get the value of the form.

<form 
  class="row" 
  (ngSubmit)="generatePdfFromOverview(generatePdfForm)" 
  #generatePdfForm="ngForm">

And then in your Component Class:

generatePdfFromOverview(generatePdfForm) {
  console.log('Form Value: ', generatePdfForm.value);
}

This value is going to have a selectedSortOnItem property on it which is what you're looking for.

Here's a Sample StackBlitz for your ref.

score 0 · Accepted Answer · answered Nov 20 '18 at 14:27

0

Turns out this was related to an issue of https://materializecss.com/

The javascript from Materialize was causing issues with the select functionality.

Upgrading to 1.0.0 resolved the issue.

answered Nov 20 '18 at 14:27

stijn.aerts

6,026
5
30
46

Can't get value of select in Angular 7

2 Answers2