MatFormFieldControl : comprendre l'erreur une fois pour toutes

Introduction : pourquoi votre formulaire Angular crie-t-il une erreur ?

Avez-vous déjà rencontré cette situation : vous écrivez un beau formulaire avec Angular Material, tout semble parfait, mais soudain la console du navigateur affiche le message :

mat-form-field must contain a MatFormFieldControl

Ou, si vous utilisez le mode strict de TypeScript, quelque chose comme :

Error: mat-form-field must contain a MatFormFieldControl. Did you forget to add a directive that implements MatFormFieldControl?

C'est l'une des erreurs les plus populaires sur Stack Overflow (des milliers de vues !), et aujourd'hui nous allons l'analyser en profondeur. Vous apprendrez non seulement comment corriger ce problème, mais aussi pourquoi il se produit. Et surtout, vous apprendrez à créer vos propres contrôles pour Angular Material si le MatInput standard ne vous convient pas.

C'est parti ! 🚀

Qu'est-ce que MatFormFieldControl et à quoi sert-il ?

Avant de traiter l'erreur, comprenons l'anatomie d'Angular Material. mat-form-field est un conteneur qui ajoute le style Material Design (label, soulignement, indices, erreurs). Mais à lui seul, il n'affiche rien. Il a besoin d'un "enfant" — une directive ou un composant qui implémente l'interface MatFormFieldControl.

Cette interface (ou classe abstraite) décrit comment le contrôle interagit avec le formulaire : comment obtenir la valeur, comment afficher une erreur, comment gérer le focus. L'implémentation standard est MatInput. Si vous écrivez :

<mat-form-field>\n  <input matInput placeholder="Nom">\n</mat-form-field>

— alors la directive matInput implémente automatiquement MatFormFieldControl.

L'erreur se produit lorsque Angular ne trouve aucun élément enfant avec une telle implémentation. Par exemple :

<mat-form-field>\n  <input placeholder="Nom"> <!-- Pas de matInput ! -->\n</mat-form-field>

Ou lorsque vous essayez d'utiliser un composant personnalisé qui n'a pas connecté l'interface.

Causes typiques de l'erreur (et comment les corriger)

1. Vous avez oublié d'ajouter la directive matInput

La cause la plus banale. Vous n'avez tout simplement pas spécifié matInput sur l'élément <input>.

Incorrect :

<mat-form-field>\n  <input placeholder="Email">\n</mat-form-field>

Correct :

<mat-form-field>\n  <input matInput placeholder="Email">\n</mat-form-field>

Vérifiez également que vous avez importé MatInputModule dans votre module :

import { MatInputModule } from '@angular/material/input';\n\n@NgModule({\n  imports: [MatInputModule]\n})\nexport class AppModule { }

2. Vous utilisez le mauvais élément HTML

MatInput fonctionne uniquement avec <input> et <textarea>. Si vous essayez d'envelopper un simple <div> ou <select> (sans mat-select) dans mat-form-field, vous obtiendrez une erreur.

Incorrect :

<mat-form-field>\n  <div>Du contenu quelconque</div>\n</mat-form-field>

Correct : utilisez les composants Material appropriés :

<mat-form-field>\n  <mat-select placeholder="Ville">\n    <mat-option value="1">Paris</mat-option>\n  </mat-select>\n</mat-form-field>

Pour mat-select, vous devez importer MatSelectModule.

3. Le composant personnalisé n'implémente pas MatFormFieldControl

C'est un cas plus complexe. Supposons que vous ayez créé votre propre composant pour la saisie de date ou d'évaluation. Angular Material ne le connaît pas. Vous devez explicitement "lui apprendre".