title: Mat Autocomplete is returning empty string in console.log Angular
body: <p>I have a matautrocomplete component and it has the formControl attribute. As i am trying to get the valuse of the input fields after the user has selected the valuse it is returning empty string. How can i get the the value on the form submit.</p>
  <p>TEMPLATE file</p>
  <pre><code> &lt;mat-form-field class=&quot;&quot; appearance=&quot;outline&quot;&gt;
      &lt;mat-label&gt;Available City&lt;/mat-label&gt;
      &lt;input matInput class=&quot;input-text&quot; placeholder=&quot;start typing&quot; [matAutocomplete]=&quot;location&quot; value=&quot;{{locvaluse}}&quot; [formControl]=&quot;locationFormControl&quot;&gt;
      &lt;mat-autocomplete #location=&quot;matAutocomplete&quot; [displayWith]=&quot;displayFn&quot; &gt;
        &lt;mat-option *ngFor=&quot;let location of filteredOptions | async&quot; [value]=&quot;location&quot;&gt;
                {{ location.name}}
        &lt;/mat-option&gt;
       &lt;/mat-autocomplete&gt;
   &lt;/mat-form-field&gt;
  </code></pre>
  <p>TS File</p>
  <pre><code>
    onSubmit(){
      console.log(this.adverForm.controls.locationFormControl.value);
    }
  </code></pre>
  <p>Filtering options</p>
  <pre><code>  ngOnInit(): void {
  
      this.filteredOptions = this.locationFormControl.valueChanges
        .pipe(
          startWith(''),
          map(value =&gt; typeof value === 'string' ? value : value.name),
          map(name =&gt; name ? this._filter(name) : this.locations.slice())
        );
    }
  
    displayFn(location: LocationTypes): string {
      this.locvaluse = location &amp;&amp; location.name ? location.name : '';
      return this.locvaluse
      }
  
    private _filter(name: string): LocationTypes[] {
      const filterValue = name.toLowerCase();
  
      return this.locations.filter(location =&gt; location.name.toLowerCase().includes(filterValue));
    }
  
  
  </code></pre>
  <p>Any help would be appriciated. Thank you in advance.</p>