53l3m 53l3m - 16 days ago 14
TypeScript Question

FormGroup binding error in Angular2

Please, I'm stuck here guys ; I've got this error a day later and it is driving me crazy while developing an

Angular2
application (stable version) :

Error: Template parse errors:
Can't bind to 'FormGroup' since it isn't a known property of 'form'.
("<form name="pageForm"
[ERROR ->][FormGroup]="pageForm"
class="lc-edit-page" novalidate>
<div class="row">
<div class="col-lg-6"")


The weird part that when searching around, there is an obvious only one solution which is doing in

import { FormsModule, ReactiveFormsModule } from '@angular/forms';


in the
Module file
. I did it :

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { UsersListComponent } from './modals';
import { LcFormComponent } from './lc-form';
import { AddUComponent } from '../../../../+u/shared/components';

import { UIRouterModule } from 'ui-router-ng2';
import { TranslateModule } from 'ng2-translate';

@NgModule({
declarations: [
LcFormComponent,
UsersListComponent
],
imports: [
FormsModule,
BrowserModule,
UIRouterModule,
TranslateModule,
LcFormComponent,
UsersListComponent,
ReactiveFormsModule
],
providers: [],
exports: [
FormsModule,
BrowserModule,
UIRouterModule,
TranslateModule,
LcFormComponent,
UsersListComponent,
ReactiveFormsModule
],
entryComponents:
[
AddUComponent,
UsersListComponent

]
})
export class ParModule {}


The binding error is in the HTML of
LcFormComponent
, in other components it works smoothly but here i really did not know where is the problem.
Here is the
LcFormComponent.ts
importing part:

import { Input, Component, AfterContentInit } from '@angular/core';
import { FormBuilder, FormGroup, FormControl, Validators, NgForm } from '@angular/forms';

import * as lodash from 'lodash';
import { TranslateService } from 'ng2-translate';
import { NotificationsService } from 'angular2-notifications';
import { NgbModal, NgbModalRef, NgbModalOptions } from '@ng-bootstrap/ng-bootstrap';

import { UsersListComponent } from '../modals';
import { AddUComponent } from '../../../../../+users/shared/components/modals';

@Component({
selector: 'app-lc-form',
templateUrl: './lc-form.component.html',
styleUrls: ['./lc-form.component.scss']
})
export class LcPageComponent {

// ....

}


Any help Please ?

Answer

You are using [FormGroup] in html, which should be [formGroup] instead.