How can I get selected item value in Angular 2 Material Autocomplete

8
votes

I have created an autocomplete field with Angular Material and getting country list from web api succesfully.

CountryID -> item value(or index)

Country -> item text

When I try to get selected item's value (not text) it return the text as expected. But I need to get selected item's value.

This is my code:

this.WeatherSearchForm.get('country').value; // this returns the selected country name, ex: France

and

<md-input-container>
  <input mdInput placeholder="Select Country..." [mdAutocomplete]="auto" class="form-control validate filter-input" formControlName="country">
</md-input-container>
<md-autocomplete #auto="mdAutocomplete" md-input-name="autocompleteField" required md-input-minlength="2" md-input-maxlength="18"
  md-select-on-match required md-input-minlength="2">
  <md-option *ngFor="let country of countries | async" [value]="country.Country">
    {{ country.Country }}
  </md-option>
</md-autocomplete>

Edit: After I changed this line

<md-option *ngFor="let country of countries | async" [value]="country.Country">

to this,

<md-option *ngFor="let country of countries | async" [value]="country.CountryID">

it worked fine, this.WeatherSearchForm.get('country').value; returned the CountryID.

But in UI side after selecting a country in the autocomplete field now I see the CountryID not Country.

enter image description here enter image description here

2
angularautocompleteangular-material2
Please add the code of the UI element showing the ID now (the one one the right with 6). - BogdanC
Actually this is the code showing 6, <md-option *ngFor="let country of countries | async" [value]="country.CountryID"> - sa_

2 Answers

9
votes

You need to use [displayWith]="displayFn" inside <md-autocomplete> tag. Also, you have a pass the whole object as value.

<md-autocomplete #auto="mdAutocomplete" md-input-name="autocompleteField" required md-input-minlength="2" md-input-maxlength="18"
  md-select-on-match required md-input-minlength="2" [displayWith]="displayFn">
  <md-option *ngFor="let country of countries | async" [value]="country">
    {{ country.Country }}
  </md-option>
</md-autocomplete>

In your compoent, add:

displayFn(country): string {
      return country ? country.Country : country;
}

You can read more about it from Setting separate control and display values section in docs

demo

1
votes

Here is the final working version, hope it helps anyone else:

<md-autocomplete #auto="mdAutocomplete" md-input-name="autocompleteField" required md-input-minlength="2" md-input-maxlength="18"
  md-select-on-match required md-input-minlength="2" [displayWith]="displayFn">
  <md-option *ngFor="let country of countries | async" [value]="country">
    {{ country.Country }}
  </md-option>
</md-autocomplete>

selectedCountry:Countries;
displayFn(country: Countries): string {
  this.selectedCountry = country;
  console.log(this.selectedCountry);
  return country ? country.Country : country.CountryID;
}

this.SavetoDB(this.WeatherSearchForm.get('country').value);

SavetoDB(country:Countries)
{
   countryID = parseInt(country.CountryID);
...