0
143
Viewsmat-autocomplete not allowing me to select
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>
·
Santiago Trujillo
1 answers
Answer question0
I think you need to import: MatAutocompleteModule and MatInputModule from angular material. Moreover you need to import ReactiveFormsModule
·
Santiago Trujillo
Report
Answer question