如何從 angular 的下拉列表中獲取值

Question

我正在嘗試從下拉列表中獲取值。 但該值不會從.html 解析為.ts。 請提供任何幫助。

.html文件

<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 文件

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

在.ts 文件中，我使用form.value.<name-from-html>來獲取其他表單值並且它們有效。 只有下拉列表不起作用。 任何想法如何解決這個問題。

Answer 1

您可以查看從下拉列表中獲取值的鏈接，同時選擇下拉列表中的選定項目，我們將獲得相應項目的值。

從 Angular 的下拉列表中獲取選定的值

Answer 2

您需要輸入ngModel angular 屬性才能訪問其值

<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>

這是工作中的Plunker

Answer 3

使用 2 路綁定將 ngModel 放在 select 標簽上

Answer 4

    <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 文件