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

Viewed 8183

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 ?

1 Answers
Related