Can't bind to FormGroup since it isn't a known property of 'form' (FormsModule, ReactiveFormsModule loaded)

Question

I've just seen this question but I still have the same error. I have a shared module which I import to my feature module. But I also tried import FormsModule, ReactiveFormsModule modules to my feature module directly.

Angular 2.0 Final version.

My shared module is:

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

My feature module:

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() {}
}

The component:

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]
      });
...
}

And the view:

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

All paths and imports are correct. Any ideas? Thanks.

------ [SOLVED] -------

Changed [FormGroup]="loginForm" for [formGroup]="loginForm" :(

Change it to `[formGroup]` (camelCase, not PascalCase) and see what happens next? — Harry Ninh, Sep 23 '16 at 09:34
Thanks Harry. The Module @angular....forms has no exported member ```formGroup```. — Javier RB, Sep 23 '16 at 09:37
Sorry Harry. Yes it works. I've changed it on the module, not in view. Sorry and thank you very much :) — Javier RB, Sep 23 '16 at 09:50

score 18 · Answer 1 · answered Dec 20 '16 at 12:53

18

Solution:

import { ReactiveFormsModule } from '@angular/forms'

Import this module to app.module.ts or Your Component Class. ( Recommended to import in app.module.ts ).

Then Direct it...ex:---

imports: [
   ReactiveFormsModule
]

answered Dec 20 '16 at 12:53

Deepak swain

3,380
1
30
26

i already import in app.module.ts, but still getting the same ERROR. – Apurv Chaudhary Nov 24 '17 at 07:10
Please comment with following details: Which version of angular Project you are working on ? Are you getting problem while using FormGroup in Material Dialog ? – Deepak swain Nov 24 '17 at 08:30

Gampesh · Answer 2 · 2017-03-28T11:34:05.590

1

May be you missed to import ReactiveFormsModule module to your [yourmoduleName].module.ts

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

and add below import your component where you are using formBuilder or formGroup

imports: [ReactiveFormsModule]

edited Mar 28 '17 at 11:34

answered Mar 21 '17 at 10:34

Gampesh

4,024
2
12
9

Can't bind to FormGroup since it isn't a known property of 'form' (FormsModule, ReactiveFormsModule loaded)

2 Answers2