Impossible de se lier à formGroup Erreur de propriété inconnue dans Angular

Voyons pourquoi l'erreur «Impossible de se lier à 'formGroup' car il ne s'agit pas d'une propriété connue de 'form'» s'affiche et comment vous pouvez la corriger et faire fonctionner à nouveau votre application. [19659002] Presque toutes les applications Web frontales s'appuient sur des formulaires pour recevoir les commentaires des utilisateurs. Des fonctionnalités telles que les connexions utilisateur, la messagerie intégrée à l'application, le traitement des paiements et les paramètres personnalisés reposent sur les données de l'utilisateur qui sont généralement fournies via un formulaire HTML.

Angular, comme la plupart des frameworks frontaux, est fourni avec des bibliothèques utiles pour l'utilisation, la validation et traitement des données du formulaire. Le framework inclut en fait deux manières différentes de lier les données de formulaire à l'état de l'application – et c'est là que les choses peuvent devenir confuses.

Si vous n'importez pas le bon module de forme angulaire au bon endroit, votre le code échouera à se compiler et vous verrez Impossible de se lier à 'formGroup' car ce n'est pas une propriété connue de 'form' dans votre terminal.

Voyons pourquoi cela l'erreur apparaît et comment vous pouvez la réparer et faire fonctionner à nouveau votre application.

Le composant

Si vous créez un nouveau formulaire réactif dans Angular et que vous souhaitez regrouper plusieurs champs, vous peut créer le composant suivant:

app.component.html

 < form  [formGroup] =  " userProfileForm "   (soumettre)  = [19659011] " updateUserProfile () "  > 
     < div   class  =  " form-group "  > 
         < label   for  =  " first_name "  >  Prénom  < /  label > 
         < input   type  =  " text " 
              formControlName  =  " prénom " 
              id  =  " prénom " 
              requis > 
         < label   for  =  " last_name "  >  Last Name  ] </  label > 
         < input   type  =  " text " 
              formControlName  =  " last_name " 
              id  =  " nom de famille " 
              requis > 
     </  div > 
     < bouton   type  =  " submit " [19659012] class  =  " btn btn-default "  >  Submit  </  button > 
 </  formulaire > 
 

app.component.ts

 import   { Component }   from   '@ angular / core' ; 
 import   { FormControl  FormGroup }   de   '@ angular / forms' ; 

@  Composant  ( {
  sélecteur :   'app-root' 
  templateUrl :   './ app.component.html' 
  styleUrls :   [ './ app.component.css' ] 
} ) 
 export   class   AppComponent   {[19659102] public  userProfileForm  =   nouveau   FormGroup  ( {
    prénom :   nouveau   FormControl  ( '' ) 
    last_name :   new   FormControl  ( '' ) 
  } ) ; 

   public   updateUserProfile  () :   void   {
    
    console .  log  (
       this .  userProfileForm .  controls .  first_name .  value 
       this .  userProfileForm .  controls .  last_name .  value 
    )  ; 
  } 
} 

Ce formulaire est très simple – il prend juste le prénom et le nom d'un utilisateur et les affiche sur la console du navigateur – mais si vous essayez d'exécuter ng serve depuis votre terminal, vous verrez l'erreur Impossible de se lier à 'formGroup' car ce n'est pas une propriété connue de 'form' erreur:

Que signifie cette erreur?

Angular essaie de nous dire qu'il ne connaît pas la directive formGroup sur l'élément

 import   { BrowserModule }   from [19659080] '@ angular / platform-browser' ; 
 import   { NgModule }   from   '@ angular / core' ; 
 import   { AppComponent }   from   './ app.component' ; 
 import   { ReactiveFormsModule }   extrait de   '@ angular / forms' ; 

@  NgModule  ( {
  déclarations :   [
    AppComponent
  ] 
  importations :   [
    BrowserModule 
    ReactiveFormsModule 
  ] 
  fournisseurs :   [] 
  bootstrap :   [ AppComponent ] 
} ) 
 export   class   AppModule   { }