как получить значение из выпадающего списка в 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

Для доступа к его значению нужно поставить атрибут ngModelangular

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

вы можете проверить ссылку для получения значения из раскрывающегося списка при выборе выбранного элемента раскрывающегося списка, для чего мы получим значение для соответствующего элемента.

Получить выбранное значение из выпадающего списка -низкий список в Angular

Answer 3

Используйте двухстороннюю привязку, поместите ngModel в свой тег выбора