Styjun

I'm using the mat-autocomplete widget under my Angular app :

 <mat-form-field class="col-md-3" color="warn">
 <input type="text"
 id="libelleShop"
 #inputSelectShop
 placeholder="Selectionner la boutique"
 matInput
 formControlName="libelleShop"
 ngDefaultControl
 [matAutocomplete]="auto">
 <mat-autocomplete #auto="matAutocomplete"" 
 (optionSelected)="onShopSelectionChanged($event)">
 <mat-option *ngFor="let shop of shopData" [value]="shop.value">
 shop.name
 </mat-option>
 </mat-autocomplete>
 </mat-form-field>

my Shop data is like this :

shopData = [
 name: 'AAA' , value :'11',
 name: 'BBB', value :'22',
 name: 'CCC', value : '33'
 ];

Like this - options are displayed by name , but when selection the input displaysit by the value not the name.

Knowing that i need the value for other treatment and i won't change the [value] in the mat-automplete.

How may i take reference for the name to the input ??

Suggestions ??

You can use the displayWith attribute of Mat autocomplete and pass in a function that will return the desired formatted string.

In your example:

displayFn(shop: Shop): string 
 return shop.name;

<mat-autocomplete #auto="matAutocomplete"" (optionSelected)="onShopSelectionChanged($event)" [displayWith]="displayFn">
 <mat-option *ngFor="let shop of shopData" [value]="shop.value">
 shop.name
 </mat-option>
 </mat-autocomplete>

Because you don't want to change [value]="shop.value", your only resort is to lookup the name based on value in a function used with the displayWith feature:

<mat-autocomplete ... [displayWith]="getShopName" ... >


getShopName(value) 
 const results = this.shopData.filter(shop => shop.value === value);
 if (results.length) 
 return results[0].name;
 
 return value;

In your model 'shopData' add the ':' character after 'value' or:

export interface Shop 
 name: string;
 value: number;


shopData: Shop[] = [
 name: 'AAA' , value: 11,
 name: 'BBB', value: 22,
 name: 'CCC', value: 33
];

You can use FormControl on input tag and can change the value of this form-control using patchValue method.

Use (onSelectionChange)="onEnter($event)" and find the selectedArray option using the selected value, and from that selected option object update the value of input with any of the options key.


Html :

<form class="example-form">
 <mat-form-field class="example-full-width">
 <input #stateInput (keyup)="0" matInput placeholder="State" 
 aria-label="State" [matAutocomplete]="auto" [formControl]="stateCtrl">
 <mat-autocomplete #auto="matAutocomplete">
 <mat-option (onSelectionChange)="stateInput.value !=undefined && 
 onEnter($event)" *ngFor="let state of filteredStates | async"
 [value]="state.name">
 <img style="vertical-align:middle;" aria-hidden 
 src="state.flag" height="25" />
 <span> state.name </span> |
 <small>Population: state.population</small>
 </mat-option>
 </mat-autocomplete>
 </mat-form-field>

Ts file :

 onEnter(evt: any)
 const selectedState = this.states.find(state =>
 state.name.toLowerCase()==evt.source.value.toLowerCase());
 if (evt.source.selected) 
 console.log(selectedState);
 if(selectedState) 
 setTimeout(()=>
 this.stateCtrl.patchValue(selectedState.population);
 , 0);
 
 
 

Stackblitz Demo with other data