web-dev-qa-db-fra.com

Impossible de se lier à FormGroup car ce n'est pas une propriété connue de 'form' (FormsModule, ReactiveFormsModule chargé)

Je viens de voir cette question mais j'ai toujours la même erreur. J'ai un module partagé que j'importe dans mon module de fonctions. Mais j'ai aussi essayé d'importer directement les modules FormsModule, ReactiveFormsModule dans mon module de fonctions.

Angular 2.0 Version finale.

Mon module partagé est:

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { UPLOAD_DIRECTIVES } from 'ng2-uploader/ng2-uploader';


import { UploadComponent } from './upload/index';

import { AuthenticationService } from './services/index';

@NgModule({
  declarations: [ UploadComponent, UPLOAD_DIRECTIVES ],
  imports: [ CommonModule ],
  providers: [ AuthenticationService ],
  exports: [
    FormsModule,
    CommonModule,
    UploadComponent,
    ReactiveFormsModule
  ]
})

export class SharedModule { }

Mon module de fonctionnalité:

import { NgModule } from '@angular/core';

import { SharedModule } from '../shared/shared.module';

import { LoginComponent } from './login.component';

@NgModule({
  imports: [ SharedModule ],
  declarations: [ LoginComponent ],
  exports: [ LoginComponent ]
})

export class LoginModule {
  constructor() {}
}

Le composant:

import { Component } from '@angular/core';
import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms';
import { AuthenticationService } from '../shared';

@Component({
  selector: 'pol-login',
  templateUrl: 'login.component.html'
})
export class LoginComponent {
  loginForm: FormGroup;
  notValidCredentials: boolean = false;
  showUsernameHint: boolean = false;

  constructor(
    fb: FormBuilder,
    private authenticationService: AuthenticationService) {

      this.loginForm = fb.group({
        username: ['', Validators.compose([Validators.required, this.emailValidator])],
        password: ['', Validators.required]
      });
...
}

Et la vue:

<form class="container" (ngSubmit)="authenticate()" [ERROR ->][FormGroup]="loginForm">
....
</form>

Tous les chemins et les importations sont corrects. Des idées? Merci.

------ [RESOLU] -------

[FormGroup]="loginForm" modifié pour [formGroup]="loginForm" :(

angulartypescriptangular2-formsangular2-modules
13
Javier RB

Solution:

import { ReactiveFormsModule } from '@angular/forms'

Importez ce module dans app.module.ts ou votre classe de composant. (Recommandé d'importer dans app.module.ts).

Puis dirigez-le ... ex: ---

imports: [
   ReactiveFormsModule
]
15
Deepak swain

Peut-être avez-vous oublié d'importer le module ReactiveFormsModule dans votre [nomduproduit] .module.ts

import { FormGroup, FormControl, FormBuilder, Validator, ReactiveFormsModule } from '@angular/forms';

et ajoutez ci-dessous, importez votre composant lorsque vous utilisez formBuilder ou formGroup

imports: [ReactiveFormsModule]

1
Gampesh