Angular 2 material autocomplete selected value

Question

I have autocomplete input

<div formArrayName="addresses"> <div class="row" *ngFor="let itemrow of searchForm.controls.addresses.controls; let i=index" [formGroupName]="i"> <mat-form-field> <input type="text" class="form-control" id="address" formControlName="address" matInput [matAutocomplete]="auto" (keyup)="getESRI($event.target.value)" (focusout)="bindLocation($event.target.value)"> <mat-autocomplete #auto="matAutocomplete"> <mat-option *ngFor="let option of testLocation" [value]="option.text"> {{ option.text }} </mat-option> </mat-autocomplete> </mat-form-field> </div> </div>

"testlocation":[{"text":"Euronet","magicKey":"dHA9MSNubT1FdXJvbmV0I2NzPTE5OjExI3NjPURFVQ==","isCollection":true},{"text":"Euronet","magicKey":"dHA9MSNubT1FdXJvbmV0I2NzPTE5OjExI3NjPURFVQ==","isCollection":true}]

When I'm trying add value [value]="option.magicKey it shows in the input option.magicKey when I select option. I need option.magicKey only as the value, and option.text as the input option. Otherwise how to add option.magicKey as parameter to bindLocation($event.target.value) function?

Sagar · Accepted Answer · 2018-03-06 16:19:39Z

Use 'displayWith'

MatAutoComplete features an input called displayWith. Therein, you need to pass a function that maps your option's control value to its display value.

Here is an example:

<mat-form-field> <input matInput placeholder="Select a value" [formControl]="form.controls.enumField" [matAutocomplete]="autoComplete"> <mat-autocomplete #autoComplete="matAutocomplete" [displayWith]="valueMapper"> <-- Using displayWith here <mat-option *ngFor="let enum of enumerationObservable | async" [value]="enum.key"> {{ enum.value }} </mat-option> </mat-autocomplete>

Here's the function that returns value using key received

public valueMapper = (key) => { let selection = this.enumeration.find(e => e.key === key); if (selection) return selection.value; };

Sagar · Accepted Answer · 2018-03-06 15:26:13Z

1

Use [displayWith] attribute with auto complete field.

HTML FILE

<input type="text" placeholder="Address" mdInput formControlName="address" [mdAutocomplete]="auto" (keyup)="onKeyUp()"> <md-autocomplete #auto="mdAutocomplete" [displayWith]="displayFn"> <md-option *ngFor="let option of options" [value]="option"> {{ option.text }} </md-option> </md-autocomplete>

edited Mar 6, 2018 at 15:26

Sagar

3,2552 gold badges29 silver badges38 bronze badges

answered Dec 6, 2017 at 10:46

Mohit Saxena

1,4471 gold badge12 silver badges21 bronze badges

5 Comments

Serhio g. Lazin Over a year ago

But how to get option.magicKey value? Can I call another function with option.magicKey argument inside displayFn(option) function? Or how I can pass option.magicKey value to (focusout) event ?

Mohit Saxena Over a year ago

Pass option where you want to pass it and then fetch magicKey from it. Simple.

Serhio g. Lazin Over a year ago

Problem is address inside formArray

Serhio g. Lazin Over a year ago

Thanks for your help, I am found solution

Naren Over a year ago

How can update the search term with the keydown option value? NOT upon selecting.

Serhio g. Lazin · Accepted Answer · 2017-12-06 14:35:28Z

<mat-option> has event onSelectionChange, with this event you can call any function and bind everything from option object

(onSelectionChange)="bindLocation(option.text, option.magicKey)"

Collectives™ on Stack Overflow

Angular 2 material autocomplete selected value

3 Answers 3

Use 'displayWith'

Here is an example:

Comments

5 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Use 'displayWith'

Here is an example:

Comments

5 Comments

Comments

Related