FormControl et Input ne correspondent pas ? Résolvons le problème Angular Material

Introduction : La douleur familière de tout développeur Angular

Avez-vous déjà passé une heure à chercher une erreur qui se cachait littéralement dans une seule ligne de code ? Si vous travaillez avec Angular Material Autocomplete et que vous avez rencontré le message Can't bind to 'formControl' since it isn't a known property of 'input' — vous n'êtes pas seul. Cette question sur Stack Overflow a rassemblé des milliers de vues, et ce n'est pas pour rien. L'erreur survient au moment le plus inattendu, alors que tout semble déjà parfaitement fonctionner.

Dans cet article, nous allons analyser les causes de l'erreur, comparer en détail trois approches pour la corriger et montrer des exemples fonctionnels en TypeScript. Après avoir lu cet article, vous pourrez non seulement réparer l'autocomplétion, mais aussi mieux comprendre l'architecture d'Angular. C'est parti !

Pourquoi l'erreur Can't bind to 'formControl' se produit-elle ?

Allons droit au but. L'erreur apparaît lorsqu'Angular tente de lier la directive formControl à un élément <input>, mais ne la trouve pas dans le module actuel. Cela semble logique, mais le diable se cache dans les détails.

En réalité, formControl est le sélecteur d'une directive qui fait partie du module ReactiveFormsModule. Si vous avez oublié d'importer ce module ou si vous l'avez importé incorrectement, Angular ne sait tout simplement pas quoi faire de l'attribut [formControl] sur votre champ de saisie.

Voici une situation typique : vous créez un nouveau composant avec une autocomplétion, vous ajoutez FormControl dans le code TypeScript, et dans le template vous écrivez :

<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>

Et là — bam ! Une erreur rouge dans la console. Cela vous dit quelque chose ? Alors lisez la suite.

Approche 1 : Importer ReactiveFormsModule (La plus simple et la plus correcte)

La première et la plus évidente façon est de s'assurer que ReactiveFormsModule est importé dans le bon module. Pour les composants standalone (Angular 14+) ou les modules classiques, la procédure est légèrement différente.

Pour les modules classiques (NgModule)

Ouvrez le fichier du module où votre composant est enregistré (par exemple, app.module.ts ou shared.module.ts), et ajoutez l'import :

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    // autres imports\n  ],\n  // ...\n})\nexport class AppModule { }

Important : Sans MatInputModule, la directive matInput ne fonctionnera pas non plus, et vous obtiendrez une erreur similaire. Importez les trois modules ensemble.

Pour les composants standalone (Angular 14+ et Angular 17)

Si vous utilisez la nouvelle architecture, l'import se fait directement dans le composant :

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-