mat-autocomplete not allowing me to select

Question

I just copied the exact code from the top example from here https://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>

I would expect the value I click on to be shown in the spot it says "Pick one". Actually I did get an error. mat-form-field must contain a MatFormFieldControl. — coloradoman, Jul 25 '22 at 18:27
I forgot the imports for MatInputModule. I found the answer in this link. https://stackoverflow.com/questions/46705101/mat-form-field-must-contain-a-matformfieldcontrol — coloradoman, Jul 25 '22 at 18:34
Yes, you need that in order to make Form fields work properly — Jonathan Lopez, Jul 25 '22 at 18:36

score 0 · Answer 1 · answered Jul 25 '22 at 18:35

0

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

answered Jul 25 '22 at 18:35

Jonathan Lopez

186
6

I forgot the imports for MatInputModule. I found the answer in this link. https://stackoverflow.com/questions/46705101/mat-form-field-must-contain-a-matformfieldcontrol – coloradoman Jul 25 '22 at 18:36

mat-autocomplete not allowing me to select

1 Answers1