Stimmen FormControl und Input nicht überein? So lösen Sie das Angular Material Problem

Einleitung: Der bekannte Schmerz eines jeden Angular-Entwicklers

Haben Sie schon einmal eine Stunde damit verbracht, einen Fehler zu suchen, der sich buchstäblich in einer einzigen Codezeile versteckt hat? Wenn Sie mit Angular Material Autocomplete arbeiten und auf die Meldung Can't bind to 'formControl' since it isn't a known property of 'input' gestoßen sind – Sie sind nicht allein. Diese Frage auf Stack Overflow hat tausende Aufrufe, und das zu Recht. Der Fehler tritt im unerwartetsten Moment auf, wenn alles bereits perfekt zu funktionieren scheint.

In diesem Artikel analysieren wir die Ursachen des Fehlers, vergleichen detailliert drei Ansätze zu seiner Behebung und zeigen funktionierende Beispiele in TypeScript. Nach der Lektüre können Sie nicht nur die Autovervollständigung reparieren, sondern auch die Architektur von Angular besser verstehen. Los geht's!

Warum tritt der Fehler Can't bind to 'formControl' auf?

Kommen wir direkt zur Sache. Der Fehler tritt auf, wenn Angular versucht, die Direktive formControl an ein <input>-Element zu binden, sie aber im aktuellen Modul nicht findet. Das klingt logisch, aber der Teufel steckt im Detail.

Tatsächlich ist formControl ein Selektor einer Direktive, die Teil des Moduls ReactiveFormsModule ist. Wenn Sie vergessen haben, dieses Modul zu importieren oder es falsch importiert haben, weiß Angular einfach nicht, was es mit dem Attribut [formControl] auf Ihrem Input anfangen soll.

Hier ist eine typische Situation: Sie erstellen eine neue Komponente mit Autovervollständigung, fügen FormControl im TypeScript-Code hinzu und schreiben in der Vorlage:

<input type="text" [formControl]="myControl" [matAutocomplete]="auto">\n<mat-autocomplete #auto="matAutocomplete">\n  <mat-option *ngFor="let option of filteredOptions | async" [value]="option">\n    {{option}}\n  </mat-option>\n</mat-autocomplete>

Und dann – bumm! Ein roter Fehler in der Konsole. Kommt Ihnen das bekannt vor? Dann lesen Sie weiter.

Ansatz 1: Import von ReactiveFormsModule (Der einfachste und korrekteste)

Der erste und offensichtlichste Weg ist, sicherzustellen, dass ReactiveFormsModule in das richtige Modul importiert wird. Für Standalone-Komponenten (Angular 14+) oder klassische Module unterscheidet sich das Vorgehen geringfügig.

Für klassische Module (NgModule)

Öffnen Sie die Moduldatei, in der Ihre Komponente registriert ist (z. B. app.module.ts oder shared.module.ts), und fügen Sie den Import hinzu:

import { ReactiveFormsModule } from '@angular/forms';\nimport { MatAutocompleteModule } from '@angular/material/autocomplete';\nimport { MatInputModule } from '@angular/material/input';\n\n@NgModule({\n  imports: [\n    ReactiveFormsModule,\n    MatAutocompleteModule,\n    MatInputModule,\n    // andere Importe\n  ],\n  // ...\n})\nexport class AppModule { }

Wichtig: Ohne MatInputModule funktioniert die Direktive matInput ebenfalls nicht, und Sie erhalten einen ähnlichen Fehler. Importieren Sie alle drei Module zusammen.

Für Standalone-Komponenten (Angular 14+ und Angular 17)

Wenn Sie die neue Architektur verwenden, erfolgt der Import direkt in der Komponente:

import { Component } from '@angular/core';\nimport { ReactiveFormsModule, FormControl } from '@angular/forms';\nimport { MatAutocompleteModule } from '@angular/material/autocomplete';\nimport { MatInputModule } from '@angular/material/input';\nimport { AsyncPipe } from '@angular/common';\n\n@Component({\n  selector: 'app-search',\n  standalone: true,\n  imports: [\n    ReactiveFormsModule,\n    MatAutocompleteModule,\n    MatInputModule,\n    AsyncPipe\n  ],\n  template: `\n    <input type="text" [formControl]="myControl" [matAutocomplete]="auto">\n    <mat-autocomplete #auto="matAutocomplete">\n      <mat-option *ngFor="let option of filteredOptions | async" [value]="option">\n        {{option}}\n      </mat-option>\n    </mat-