How to pass the drop down option value to component using data list?
Asked on August 30, 2018
Hello,
I need to have drop down with search bar. So I have used the <datalist>.
With this I am getting drop down with search bar. But on select I should pass the selected value (object means I should pass name & id of selected value).
For example: I am listing applications in drop down, on select of particular app it should pass the details of app to the function.
I tried following ways:
1) <input list="appList" [(value)]="apps.id" [(ngModel)]="currentApp" name="app" (change)="onAppClickToStartProcess(currentApp)" />
<datalist id="appList" [(ngModel)]="apps.id" (change)="onAppClickToStartProcess($event.value)">
<mat-select [(value)]="apps.id" [(ngModel)]="apps.id" name="apps.id" style="width:10%;font-size: 5px" placeholder="Application" (change)="onAppClickToStartProcess($event.value)">
<mat-option *ngFor="let app of apps" [value]="app">
{{app.name}}
</mat-option>
</mat-select>
</datalist>
With above method I am able to get selected application name in component.ts file but I also need the app id in the component .ts file. But it is giving following error:
ERROR Error: "No value accessor for form control with unspecified name attribute"
2)
<input list="applications" name="application">
<datalist id="applications" onchange = "onAppClickToStartProcess($event.value)">
<option *ngFor="let app of apps" onchange="onAppClickToStartProcess($event.value)">
{{app.name}}
</option>
</datalist>
3)
<input list="appList" [(value)]="apps.id" [(ngModel)]="apps.id" name="apps.id" (change)="onAppClickToStartProcess($event.value)" />
<datalist id="appList">
<select [(value)]="apps.id" [(ngModel)]="apps.id" name="apps.id" (change)="onAppClickToStartProcess($event.value)">
<option *ngFor="let app of apps" [value]="app.name"></option>
</select>
</datalist>
How to achieve this? Please provide solution for solving this issue.
Thanks & Regards
Shilpa Kulkarni
Replied on August 30, 2018
If I use only select tag without <datalist> I am able to pass the object from html file (details of selected app) to the component.ts file. I have written as follows:
<mat-select [(value)]="apps.id" [(ngModel)]="apps.id" name="apps.id" style="width:10%;font-size: 5px" placeholder="Application" (change)="onAppClickToStartProcess($event.value)">
<mat-option *ngFor="let app of apps" [value]="app">
{{app.name}}
</mat-option>
</mat-select>
But I want to have drop down with the search bar. So I am using <datalist> but with this I am not able to pass the details. How to achieve this?
Replied on August 30, 2018
Try using [ngValue] instead of [value]
<mat-select [(value)]="apps.id" [(ngModel)]="myapp">
<mat-option *ngFor="let app of apps" [ngValue]="app">
{{app.name}}
</mat-option>
</mat-select>
Declare myapp variable in typescript and on change you can get myapp.id and myapp.name
in onAppClickToStartProcess() method.
The difference between [ngValue] and [value] is that [value] is always string, where in [ngValue] you can pass object.
Replied on August 30, 2018
Thank you for the reply. I used [ngValue] but I am getting following error:
Can't bind to 'ngValue' since it isn't a known property of 'mat-option'.
Actually with following code I am able to get object[app details ] in the component.ts file:
<mat-select [(value)]="apps.id" [(ngModel)]="apps.id" name="apps.id" style="width:10%;font-size: 5px" placeholder="Application" (change)="onAppClickToStartProcess($event.value)">
<!-- <mat-option></mat-option>
--> <mat-option *ngFor="let app of apps" [value]="app">
{{app.name}}
</mat-option>
</mat-select>
But the issue is I want the drop down with search bar so I have used the <datalist>. With <datalist> I am unable to pass object, only it is passing app name. How to achieve that (How to pass the object using datalist)?
Replied on August 30, 2018
Instead of datalist, use Angular Material Autocomplete
Sample code:
<form class="example-form">
<mat-form-field class="example-full-width">
<input type="text" placeholder="Assignee" aria-label="Assignee" matInput [formControl]="myControl" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
<mat-option *ngFor="let option of filteredOptions" [value]="option">
{{option.name}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</form>
