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

Question

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 ?

Answer 1

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