how to get value from dropdown list in angular

Question

I'm trying to get a value from dropdown list. but the value doesn't parse from .html to .ts. any help with that, please.

.html file

<mat-card>
    <form (submit)="onAddName(nameForm)" #nameForm="ngForm">

        <mat-form-field appearance="fill">
            <mat-label>select one</mat-label>
            <mat-select name="name" id="name">
                <mat-option value="NAME_01">NAME 01</mat-option>
                <mat-option value="NAME_02">NAME 02</mat-option>
                <mat-option value="NAME_03">NAME 03</mat-option>
            </mat-select>
        </mat-form-field>
    
  </form>
</mat-card>

.ts file

 onAddName(form: NgForm) {
    if (form.invalid) {
      return;
    }
    this.nameService.addname(
      form.value.name, 
      );
    form.resetForm();
  }

in .ts file, I've used form.value.<name-from-html> to get other form values and they worked. only dropdown list is not working. any idea how to slove this.

https://stackoverflow.com/q/56845317/10243797 is this your answer — Sahan Dissanayaka, Jul 11 '20 at 05:35

score 1 · Answer 1 · answered Jul 11 '20 at 05:35

1

you can check out the link for getting value from the dropdown list while selecting the dropdown list selected item for that we will get the value for the respective item.

Get selected value from a drop-down list in Angular

answered Jul 11 '20 at 05:35

Santhakumar Munuswamy

548
5
18

score 1 · Accepted Answer · answered Jul 11 '20 at 06:08

You need to put ngModelangular attribute to access its value

<mat-select name="name" id="name" ngModel>// <--
            <mat-option value="NAME_01">NAME 01</mat-option>
            <mat-option value="NAME_02">NAME 02</mat-option>
            <mat-option value="NAME_03">NAME 03</mat-option>
        </mat-select>

Here's the working Plunker

score 0 · Answer 3 · answered Jul 11 '20 at 08:28

0

Use 2 way binding put ngModel on your select tag

answered Jul 11 '20 at 08:28

Raj Ghamsani

29
3

score -1 · Answer 4 · answered Jan 27 '21 at 03:14

-1

    <mat-form-field appearance="fill">
        <mat-label>select one</mat-label>
           <mat-select [(value)]="selected">
            <mat-option value="NAME_01">NAME 01</mat-option>
            <mat-option value="NAME_02">NAME 02</mat-option>
            <mat-option value="NAME_03">NAME 03</mat-option>
        </mat-select>
    </mat-form-field>

.ts file

answered Jan 27 '21 at 03:14

Himanshu Patel

1

1

Would you care to [edit] your answer and explain the code? – Greenonline Jan 27 '21 at 04:48

how to get value from dropdown list in angular

4 Answers4