Angular 2 Autocomplete to fetch value from selected option

Question

In angular material, autocomplete feature mat-option will have same entries on "value" field and text within.

<mat-form-field fxFlex="50">
   <input type="text" placeholder="{{label.addUser.formLabels.role}}"   matInput [matAutocomplete]="role"  formControlName="roleId">
   <mat-autocomplete  #role="matAutocomplete" autoActiveFirstOption>
     <mat-option *ngFor="let option of roleListFilter | async" value="{{option.roleId}}" >
     <span>{{option.roleName}}</span>
    </mat-option>
   </mat-autocomplete>
</mat-form-field>

and I get the output as shown in the following question..

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

I want to display selected string in the text box and set roleId in value field at the same time.. Is this achievable?

Prashant Pimpale · Answer 1 · 2018-06-18T11:52:28.107

0

Try below code:

 <mat-form-field>
    <input matInput placeholder="State" aria-label="State" 
      [matAutocomplete]="auto" [formControl]="your_ctrl">
    <mat-autocomplete #auto="matAutocomplete">
       <mat-option (click)="getSelectedElementId(item.id)" *ngFor="let item of your_list | async" 
          [value]="item.name">
          <span>{{ item.name }}</span> |
       </mat-option>
    </mat-autocomplete>
</mat-form-field>

In .ts file:

getSelectedElementId(id){
    console.log(id)
}

edited Jun 18 '18 at 11:52

answered Jun 18 '18 at 10:26

Prashant Pimpale

10,349
9
44
84

feature which I am using is not its if we add this [value]="option.value" , on selection this value will be displayed in the textbox instead of "option.name" – Varsha Bommarabettu Jun 18 '18 at 11:14
Ok but as per official document the above code is working – Prashant Pimpale Jun 18 '18 at 11:21
Can you produce a plucker? – Prashant Pimpale Jun 18 '18 at 11:21
Here is the official documentation https://material.angular.io/components/autocomplete/examples – Prashant Pimpale Jun 18 '18 at 11:22
Thank you for the quick response, but my question was to have [value] = "item.id" instead of [value]="item.name" .. and whatever we enter in value field will be displayed in the text box.. so how can I fetch id of each options on select.. – Varsha Bommarabettu Jun 18 '18 at 11:44
Do you want that value in your ts file then you can define a function for mat-option like I edited in the answer – Prashant Pimpale Jun 18 '18 at 11:53
Yes this can be done.. but this is one of the fields in my form , so when we use formGroup, how will this Id be fetched? – Varsha Bommarabettu Jun 18 '18 at 11:59
Use ngModel then – Prashant Pimpale Jun 18 '18 at 12:09
For particular control – Prashant Pimpale Jun 18 '18 at 12:10
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/173332/discussion-between-varsha-bommarabettu-and-prashant-pimpale). – Varsha Bommarabettu Jun 18 '18 at 12:38

Angular 2 Autocomplete to fetch value from selected option

1 Answers1