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.
Simple autocompleteStart by creating the autocomplete panel and the options displayed inside it. Each option should be defined by a mat-option tag. Set each option's value property to whatever you'd like the value of the text input to be when that option is selected.
The <mat-autocomplete>, an Angular Directive, is used as a special input control with an inbuilt dropdown to show all possible matches to a custom query. This control acts as a real-time suggestion box as soon as the user types in the input area.
displayWith : ((value: any) => string) | null. Function that maps an option's control value to its display value in the trigger. @Input().... Read more > Angular Autocomplete Displaywith With Code Examples.
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
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);
...
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With