Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

144
Visualizações
mat-autocomplete not allowing me to select

enter image description hereI 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>

about 4 years ago · Santiago Trujillo
1 Respostas
Responde à pergunta

0

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

about 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda