mat-autocomplete not allowing me to select

Question

I just copied the exact code from the top example from herehttps://v7.material.angular.io/components/autocomplete/examples

The problem is when I select something by clicking on it in the list, it isn't showing up in the box at the top. I would expect it to based on how it worked in their example. When I click the element, it shows the click animation but nothing is actually selected.

I am getting this error in the console. mat-form-field must contain a MatFormFieldControl.

Here is my code. I am using angular v13

 import { Component, OnInit } from '@angular/core'; import {FormControl} from "@angular/forms"; @Component({ selector: 'app-autocomplete-display-example', templateUrl: './autocomplete-display-example.component.html', styleUrls: ['./autocomplete-display-example.component.css'] }) export class AutocompleteDisplayExampleComponent{ myControl = new FormControl(); options: string[] = ['One', 'Two', 'Three']; }

 <form class="example-form"> <mat-form-field class="example-full-width"> <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto"> <mat-autocomplete #auto="matAutocomplete"> <mat-option *ngFor="let option of options" [value]="option"> {{option}} </mat-option> </mat-autocomplete> </mat-form-field> </form>

Answer 1

I think you need to import: MatAutocompleteModule and MatInputModule from angular material. Moreover you need to import ReactiveFormsModule