Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Choose by name et get the id in md-autocomplete input in angular 4 material application

I have an angular 4 application with material design. In this application I have a form with an autocomplete field.

This is my html code :

<div class="form-group">
  <md-input-container>
    <input mdInput type="text" mdInput [mdAutocomplete]="project" [formControl]="projectCtrl" placeholder="Choose a project" [(ngModel)]="selectProjectForNewCollab" name="selectProjectForNewCollab">
  </md-input-container>
  <md-autocomplete #project="mdAutocomplete">
    <md-option *ngFor="let project of filteredProjects | async" [value]="project.name">
      {{ project.name }}
    </md-option>
  </md-autocomplete>
</div>

And my ts code :

console.log("project = " + this.selectProjectForNewCollab);

So, I have projects with 3 fields : {id: "1", name: "test", photo: "test"}. I want to choose a project by its name but get back the id in return. Actually, I have choose with the name but I get the name at the end. If I change the [value]="project.id", I get the id but it's teh id which is displayed in the input.

So, do you know how I can do to get the id but choose by name and display the name in the input ?

like image 449
Adrien Avatar asked Jul 18 '17 13:07

Adrien


Video Answer


1 Answers

You need to have separate control and display for md-autocomplete. md-autocomplete provides displayWith api which can be used to pick which field to show in dropdown/selected field.

For your code, it would look something like following:

html:

<md-input-container>
  <input mdInput placeholder="Project" 
         [(ngModel)]="selectProjectForNewCollab" (ngModelChange)="setProject(project)"
         [mdAutocomplete]="project" [formControl]="stateCtrl">
</md-input-container>

<md-autocomplete #project="mdAutocomplete" [displayWith]="displayFn">
  <md-option *ngFor="let project of filteredStates | async" [value]="project" >
    {{ project.name }}
  </md-option>
</md-autocomplete>

In component.ts, have to add the displanFn:

displayFn(project): string {
    console.log(project);
      return project ? project.name : project;
}

Please note that, in html, the binding is with the whole object now [value]="project", which allows to show one property, but get all properties of the object behind the scenes, from there, you can pick the id of the selected item.

Plunker demo

like image 53
Nehal Avatar answered Oct 18 '22 14:10

Nehal