Получить значение выбранной опции при изменении события в Angular - PullRequest
Новая
       43

Получить значение выбранной опции при изменении события в Angular

0 голосов
/ 18 марта 2020

Я использую реактивную форму Angular для отправки данных формы. Я хочу получить доступ к выбранному значению параметра из одного из моих входов, аналогично тому, как я сейчас делаю, когда отправляю форму. 

(ngSubmit)="onSubmit(searchForm.value)"

Обратите внимание на массив фильтров:

enter image description here

Однако, когда я изменяю выбор, я не могу получить тот же результат, что и event.target.value logs 3: Object

HTML: 

<div class="col-md-2" *ngFor="let filter of this.filters; index as i" formArrayName="filters" >
          <div class="form-group">
            <select [formControlName]="i" (change)="onSelectChange($event.target.value)" size="5" class="form-control" multiple>
              <option [ngValue]="null" value="-1" disabled class="first-option-item">{{ filter.name }}</option>
              <option
                *ngFor="let filterValue of this.filterValues[i].items"
                [ngValue]="{
                  filterHeader: { id: filter.id, value: filter.name },
                  filterSelections: { id: filterValue.id, value: filterValue.name }
                }">
                {{filterValue.name}}
              </option>
            </select>
          </div>
        </div>

Что я делаю не так?

Ответы [ 2 ]

0 голосов
/ 19 марта 2020

Мне удалось получить добавленное значение выбранного параметра (ngModelChange) для выбора элемента и [ngValue] для параметров. Не было необходимости добавлять [(ngModel)] тоже. 

<select [formControlName]="i" (ngModelChange)="onSelectChange($event)" size="5" class="form-control" multiple>
    <option [ngValue]="null" value="-1" disabled class="first-option-item">{{ filter.name }}</option>
    <option *ngFor="let filterValue of this.filterValues[i].items" [ngValue]="filterValue">
        {{filterValue.name}}
    </option>
</select>
0 голосов
/ 18 марта 2020

Я предлагаю вам сохранить выбранное значение в дополнительной переменной. И используйте привязку [(value)] в вашем шаблоне, но в настоящее время я не уверен, что это работает для нативного выбора. Я использую это с моими компонентами из анугларного материала . 

<select [formControlName]="i" (change)="onSelectChange($event.target.value)" size="5" class="form-control" multiple>
    <option [ngValue]="null" value="-1" disabled class="first-option-item">{{ filter.name }}</option>
    <option
        *ngFor="let filterValue of this.filterValues[i].items"
        [ngValue]="{
            filterHeader: { id: filter.id, value: filter.name },
            filterSelections: { id: filterValue.id, value: filterValue.name }
        }">
      {{filterValue.name}}
    </option>
</select>

Другое решение заключается в использовании [(ngModel)] с (ngModelChange)="yourfunction", эта запись может быть полезной. 

<select [(ngModel)]="selectedItem" (ngModelChange)="onChange($event)">
...