mat-autocomplete not binding correctly

Question

I'm attempting to use two matInput fields that each bind with separate mat-autocomplete panels. Following the steps here, I'm able to get one to work fine, but I'm having difficulties with two input fields and autocomplete panels.

Here's my html:

<form>

  <mat-form-field>
    <input matInput [matAutocomplete]="first" [formControl]="myControl">
     <mat-autocomplete #first="matAutocomplete">
       <mat-option *ngFor="let option of filteredOptions1 | async" [value]="option">
          {{option}}
        </mat-option>
     </mat-autocomplete>
   </mat-form-field>


   <mat-form-field>
     <input matInput [matAutocomplete]="second" [formControl]="otherControl">
     <mat-autocomplete #second="matAutocomplete">
       <mat-option *ngFor="let option of filteredOptions2 | async" [value]="option">
          {{option}}
       </mat-option>
      </mat-autocomplete>
   </mat-form-field>

</form>

Here's my component:

import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import {Observable} from 'rxjs';
import {map, startWith} from 'rxjs/operators';


@Component({
  selector: 'app-property-create',
  templateUrl: './property-create.component.html',
  styleUrls: ['./property-create.component.css']
})

export class PropertyCreateComponent implements OnInit {

  myControl = new FormControl();
  otherControl = new FormControl();

  options1: string[] = ['One', 'Two', 'Three'];
  options2: string[] = ['Four', 'Five', 'Six'];

  filteredOptions1: Observable<string[]>;
  filteredOptions2: Observable<string[]>;

  constructor() { }

  ngOnInit() {

    this.filteredOptions1 = this.myControl.valueChanges
      .pipe(
        startWith(''),
        map(value => this._filter(value))
      );

    this.filteredOptions2 = this.otherControl.valueChanges
      .pipe(
        startWith(''),
        map(value => this._filter2(value))
      );
  }

  private _filter(value: string): string[] {
    const filterValue = value.toLowerCase();

    return this.options1.filter(option => option.toLowerCase().includes(filterValue));
  }

  private _filter2(value: string): string[] {
    const filterValue = value.toLowerCase();

    return this.options2.filter(option => option.toLowerCase().includes(filterValue));
  }

}

When linking each text input field to the corresponding panel, I'm using [matAutocomplete]="first" to link the first panel to the first text input. Based on the Angular Material docs, I was expecting to be able to link the second text input field to the second autocomplete panel by using [matAutocomplete]="second".

Right now my autocomplete panels are showing up in the same spot, rather than under the corresponding text field.

Has anyone seen this or know what I'm doing wrong?

User3250 User3250 · Accepted Answer · 2018-11-11T03:57:37

Turns out you are missing the css classes for the form and mat-form-field elements:

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input  placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="first">
    <mat-autocomplete #first="matAutocomplete">
      <mat-option *ngFor="let option of filteredOptions1|async" [value]="option">
        {{option}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
  <mat-form-field class="example-full-width">
    <input placeholder="Pick one" aria-label="Number" matInput [formControl]="otherControl" [matAutocomplete]="second">
    <mat-autocomplete #second="matAutocomplete">
      <mat-option *ngFor="let option of filteredOptions2| async" [value]="option">
        {{option}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

Stackblitz here: https://stackblitz.com/edit/angular-gqax9d

mat-autocomplete not binding correctly

1 Answers