Ошибка Can't bind to 'formControl' since it isn't a known property of 'input' в Angular Material Autocomplete

Основная причина ошибки

Ошибка Can't bind to 'formControl' since it isn't a known property of 'input' возникает, когда Angular не может найти директиву FormControlDirective, которая обрабатывает привязку [formControl]. Это происходит, если ReactiveFormsModule не импортирован или импортирован неправильно.

В вашем случае проблема, скорее всего, в том, что вы импортировали ReactiveFormsModule в app.module.ts, но ваш компонент SearchComponent находится в другом модуле (например, в SearchModule). В Angular модули имеют свою область видимости — если компонент объявлен в модуле, который не импортирует ReactiveFormsModule, то директивы реактивных форм не будут доступны в этом компоненте.

Решение

Есть два правильных способа исправить ошибку:

1. Импортировать ReactiveFormsModule в модуль, где объявлен ваш компонент
2. Использовать FormsModule (для template-driven форм) вместо ReactiveFormsModule — но это не подходит для formControl

Правильный импорт (пример для AppModule)

Убедитесь, что ваш app.module.ts выглядит так:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ReactiveFormsModule } from '@angular/forms';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
import { AppComponent } from './app.component';
import { SearchComponent } from './search/search.component';

@NgModule({
  declarations: [
    AppComponent,
    SearchComponent  // <-- ваш компонент должен быть здесь
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ReactiveFormsModule,  // <-- обязательный импорт
    MatAutocompleteModule,
    MatInputModule,
    MatFormFieldModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Если у вас выделенный модуль для компонента

Если SearchComponent объявлен в отдельном модуле (например, SearchModule), импортируйте ReactiveFormsModule туда:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { SearchComponent } from './search.component';

@NgModule({
  declarations: [SearchComponent],
  imports: [
    CommonModule,
    ReactiveFormsModule,  // <-- обязательно здесь
    MatAutocompleteModule,
    MatInputModule,
    MatFormFieldModule
  ],
  exports: [SearchComponent]
})
export class SearchModule { }

Дополнительные проверки

• Убедитесь, что установлены все необходимые пакеты: npm install @angular/forms @angular/material @angular/cdk
• Проверьте, что в angular.json подключены стили Angular Material (обычно node_modules/@angular/material/prebuilt-themes/indigo-pink.css)
• Если вы используете standalone-компоненты (Angular 14+), импортируйте ReactiveFormsModule в imports самого компонента

Пример для standalone-компонента (Angular 15+)

import { Component } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';

@Component({
  selector: 'app-search',
  standalone: true,
  imports: [
    ReactiveFormsModule,
    MatAutocompleteModule,
    MatInputModule,
    MatFormFieldModule
  ],
  template: `...`
})
export class SearchComponent { }

После любого из этих исправлений ошибка должна исчезнуть, и formControl будет работать корректно.

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-search',
  standalone: true,
  imports: [FormsModule, MatAutocompleteModule, MatInputModule, MatFormFieldModule],
  template: `
    <mat-form-field>
      <input type="text" matInput [(ngModel)]="searchValue" [matAutocomplete]="auto">
      <mat-autocomplete #auto="matAutocomplete" (optionSelected)="onOptionSelected($event)">
        <mat-option *ngFor="let option of filteredOptions" [value]="option">
          {{ option }}
        </mat-option>
      </mat-autocomplete>
    </mat-form-field>
  `
})
export class SearchComponent {
  searchValue = '';
  options: string[] = ['Apple', 'Banana', 'Orange'];
  filteredOptions = this.options;

  onOptionSelected(event: any): void {
    console.log('Selected:', event.option.value);
  }
}