Impossible de lier 'formGroup' car ce n'est pas une propriété connue de 'form'. en angulaire 4

Question

j'ai eu l'erreur comme ne peut pas lier à 'formGroup' car ce n'est pas une propriété connue de 'form'. mais j'importe FormsModule, ReactiveFormsModule et déclaré dans les importations mais j'ai eu la même erreur s'il vous plaît me remercie mon code est:

  <form [formGroup]="loginForm" (submit)="login()" class="md-form-auth form-validation" (keypress)="keyDownFunction($event)"> 
       <fieldset> 
        <div class="form-group"> 
         <md-input-container class="full-width md-icon-left"> 
          <md-icon class="material-icons">mail_outline</md-icon> 
          <input mdInput type="email" placeholder="Email" 
            formControlName="Username"> 
         </md-input-container> 
        </div> 
        <div class="form-group"> 
         <md-input-container class="full-width md-icon-left"> 
          <md-icon class="material-icons">lock_outline</md-icon> 
          <input mdInput type="password" placeholder="Password" 
            formControlName="Password"> 
         </md-input-container> 
        </div> 

        <button [disabled]="!loginForm.valid" md-raised-button type="button" color="primary" class="float-right"> 
         Login 
        </button> 
       </fieldset> 
      </form> 

Answer 1

Il semble que vous n'avez pas créé loginForm formgroup dans le composant.

Vous pouvez le créer avec le code suivant. Copiez ce code dans votre composant de connexion et l'erreur disparaîtra.

export class LoginComponent implements OnInit { private loginForm : FormGroup; 
    loading:boolean = false; 
    constructor(private formBuilder: FormBuilder) { 
     this.loginForm = this.formBuilder.group({ 
      Username: ['', [Validators.required]], 
      Password: ['',[Validators.required]] 
     }); 
    } 
} 

Answer 2

Oublier FormsModule, qui est pour les formes de modèle conduit, vous faites usage de formes, dirigées par les modèles qui utilisent le ReactiveFormsModule. Cette erreur est levée lorsque vous ne parvenez pas à importer ce module et essayez d'utiliser la liaison de propriété [formGroup]. Parfois, j'importe le module, mais j'oublie de l'ajouter au tableau imports. Vous n'avez clairement pas ajouté ReactiveFormsModule au tableau des importations du module dans lequel ce composant est déclaré. Il suffit de vérifier à nouveau et de l'ajouter aux importations pour résoudre votre problème.