Не могу получить значение select в Angular 7

Question

Это мой 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>

Значения хорошо отображаются в представлении.

Однако значение не обновляется в файле .ts при выборе другого.Перепробовал множество вещей.Последовал примеру в Angular Docs, но, похоже, не работает ..

Answer 1

Оказывается, это было связано с проблемой https://materializecss.com/

Javascript из Materialize вызывал проблемы с функциональностью выбора.

Обновление до 1.0.0 решило проблему.

Answer 2

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

Передать generatePdfForm в generatePdfFromOverview в качестве аргумента и затем использоватьvalue свойство для получения значения формы.

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

А затем в вашем классе компонентов:

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

Этот value будет иметь selectedSortOnItem свойство на это то, что вы ищете.

Вот Образец StackBlitz для вашей ссылки.