title: Mat-Autocomplete with FormControlName doesn´t display the value I want
body: <p>I´m using the mat autocomplete with the FormControlName and I don´t know why but in the mat-option is displaying a value that I don´t want to display.</p>
  <p>Here´s my code:</p>
  <p>HTML:</p>
  <pre><code>&lt;form class=&quot;mat-card mat-elevation-z4 p-24 animated fadeIn delay-1s&quot; fxLayout=&quot;column&quot; fxLayoutAlign=&quot;start&quot;
               [formGroup]=&quot;formCreateRequirement&quot; #formDirective=&quot;ngForm&quot; (ngSubmit)=&quot;onSubmit(formDirective)&quot;&gt;
  
              &lt;div class=&quot;h2 mb-24&quot; fxLayoutAlign=&quot;center center&quot;&gt;Some text here...&lt;/div&gt;
  
              &lt;div fxLayout=&quot;row&quot; fxLayoutAlign=&quot;start center&quot; fxFlex&gt;
  
                  &lt;mat-form-field appearance=&quot;outline&quot; fxFlex=&quot;100&quot;&gt;
                      &lt;mat-label&gt;Project&lt;/mat-label&gt;
  
                      &lt;input matInput 
                             formControlName=&quot;projectId&quot;
                             required
                             [matAutocomplete]=&quot;auto&quot;&gt;
                      
                             &lt;mat-autocomplete #auto=&quot;matAutocomplete&quot; autoActiveFirstOption
                              &gt;
                                  &lt;mat-option *ngFor=&quot;let project of filteredprojects  | async&quot; [value]=&quot;project.id&quot;&gt;
                                      {{project.name}}
                                  &lt;/mat-option&gt;
                             &lt;/mat-autocomplete&gt;&lt;/form&gt;
  </code></pre>
  <p>TS:</p>
  <pre><code>filterProjects(name: string){
      return this.projects.filter( project =&gt; project.name.toLowerCase()
      .indexOf(name.toLowerCase()) === 0);
  }
  </code></pre>
  <p>ngOnInit():{</p>
  <pre><code>    this.filteredProjects = this.formCreateRequirement.controls.projectId.valueChanges
      .pipe(
          startWith(''),
          map( project=&gt;  project? this.filterProjects(project) : this.projects.slice() )
      );
  </code></pre>
  <p>}</p>
  <p>So, what i´d like to display on the mat-option is the {{project.name}} but what displays is the project.id</p>
  <p><a href="https://i.stack.imgur.com/JRiiL.png" rel="nofollow noreferrer">see te image here</a></p>