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

Question

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.

Please add the code of the UI element showing the ID now (the one one the right with 6). — BogdanC, Jul 10 '17 at 16:45

score 9 · Accepted Answer · edited Oct 26 '18 at 09:47

9

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

edited Oct 26 '18 at 09:47

Stefan Falk

23,898
50
191
378

answered Jul 10 '17 at 18:11

Nehal

13,130
4
43
59

thanks but it doesn't work. As far as I see country is null in displayFn function. I also checked the docs and I believe it may not work as well because we don't send any user object in function parameters. – sa_ Jul 11 '17 at 16:23
Have you checked the demo? It should work, if you are passing [value]="country". You don't have to pass 'user' for display Fn to work, it's taking 'country' object instead. – Nehal Jul 11 '17 at 16:31
The problem is I cannot get the selectedvalue. if I set to CountryID like this: [value]="country.CountryID" then this.WeatherSearchForm.get('country').value returns Malta not 6 and display value is 6 not Malta. If I set this: [value]="country.Country" then display value is correct which is Malta. But this.WeatherSearchForm.get('country').value return Malta not 6. – sa_ Jul 11 '17 at 16:41
1

I figured out now. Thanks for your help. I passed the object instead of value. and displayFn is same. displayFn(country): string { debugger; return country ? country.Country : country.CountryID; } And when I try to get the value I have casted to Country object and get the CountryID like this: this.SavetoDB(this.WeatherSearchForm.get('country').value, .... SavetoDB(country:Countries, ..... parseInt(country.CountryID) – sa_ Jul 11 '17 at 16:49
Can I call other function inside displayFn? It returns me error – Serhio g. Lazin Dec 06 '17 at 10:00
value should be object , thanks, you saved me . – Naresh Etikyala Mar 01 '21 at 09:43

sa_ · Answer 2 · 2017-07-11T17:03:11.520

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);
...

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

2 Answers2

Linked