0

Помогите пожалуйста получить из material autocomplete после нажатия на кнопку submit выбранное значение. Мой код выглядит приблизительно так: html:

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input  type="text" 
                    placeholder="Сделайте выбор" 
                    matInput 
                    name="city"
                    [matAutocomplete]="auto"   
                    (input)="getCities(city)"                   
                    [(ngModel)]="city">
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let optionObj of options" [value]="optionObj" (click)="onSelectCity(optionObj.name)">
        {{ optionObj.name }}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>

  <button class="btn btn-common" mat-button (click)="submitForm(city)">
    Отправить
  </button>   
</form>

js:

  private options = [
    {name: 'qwerty', id: 34234234},
    {name: 'qwerty2', id: 121212},
    {name: 'qwerty3', id: 676767},
    {name: 'qwerty4', id: 453657}
  ];

  onSelectCity(option) {
    console.log(option);
    this.city = option;
  };

  submitForm(city) {
    console.log('submit', city);
  };

Этот код частично работает. То есть после нажатия на кнопку submit я получаю в submitForm название города. Но мне кроме названия нужен так же id города(а в реальной задаче там кроме id много ещё свойств)

1
  • как я понял, onSelectCity записывает в переменную city, выбранный город ведь так? Commented 7 нояб. 2017 в 18:11

1 ответ 1

0

У вас функция он onSelectcity принимает одно значение(название города) и записывает в city . Данный фрагмент кода передаст, только название города при клике

<mat-option *ngFor="let optionObj of options" [value]="optionObj" (click)="onSelectCity(optionObj.name)">

переписать функцию нужно так

onSelectCity(someCityName) {
   this.city = options.filter(
               (city) => {return city.name === someCityName}
               )[0];
}
3
  • Но мне незачем переписывать функцию onSelectCity(), та что сейчас есть работает отлично. Моя проблема в том, что после нажатия кнопки submit я не могу получить выбранный объект. Даже если в функции, которая обрабатывает нажатие на submit применять ваш подход, то он не будет работать в случае нескольких городов с одинаковым названием(а это частая ситуация)
    – cyklop77
    Commented 8 нояб. 2017 в 10:31
  • поменяйте на (click)="onSelectCity(optionObj)" Commented 8 нояб. 2017 в 11:12
  • тогда заработает в данном случае. Вы выше передаете только название и он название города записывает в city. Поэтому при клике submt у вас console.log(city) выводит название города Commented 8 нояб. 2017 в 11:14

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.