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.

stackoverflow.com/q/56845317/10243797 is this your answer

Sahan Dissanayaka
– Sahan Dissanayaka

2020-07-11 05:35:27 +00:00
Commented Jul 11, 2020 at 5:35 — Sahan Dissanayaka
– Sahan Dissanayaka, Commented Jul 11, 2020 at 5:35

Basheer Kharoti · Accepted Answer · 2020-07-11 06:08:10Z

1

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

answered Jul 11, 2020 at 6:08

Basheer Kharoti

4,3025 gold badges27 silver badges51 bronze badges

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

Comments

Santhakumar Munuswamy · Accepted Answer · 2020-07-11 05:35:16Z

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, 2020 at 5:35

Santhakumar Munuswamy

5485 silver badges18 bronze badges

Comments

Raj Ghamsani · Accepted Answer · 2020-07-11 08:28:58Z

0

Use 2 way binding put ngModel on your select tag

answered Jul 11, 2020 at 8:28

Raj Ghamsani

413 bronze badges

Comments

Himanshu Patel · Accepted Answer · 2021-01-27 03:14:47Z

-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, 2021 at 3:14

Himanshu Patel

1

1 Comment

Greenonline Over a year ago

Would you care to edit your answer and explain the code?

Collectives™ on Stack Overflow

how to get value from dropdown list in angular

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related