Yashveer Singh
Yashveer Singh

Reputation: 1977

Can't bind to 'formGroup' since it isn't a known property of 'form'. Angular 2 Final release

I am using the latest version of angular and following the quickstart from angular.io . I am getting this error. I tried all the fixes present on stack overflow but didn't worked out for me.I am using exactly same config files . Below is my app.module.ts

----------
    import { NgModule }      from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { HttpModule, JsonpModule } from '@angular/http';
    import {FormsModule, ReactiveFormsModule} from '@angular/forms'
    import { routing,    appRoutingProviders } from './app.routing';
    import { AppComponent }  from './app.component';
    import {PageNotFoundComponent} from './pagenotfound.component';
    import { MileStoneModule }         from './milestone/milestone.module';
    import { RecepientModule }         from './recepient/routing.module';
    @NgModule({
        imports: [
    BrowserModule,      
    routing,
    MileStoneModule, RecepientModule,
    HttpModule,
    JsonpModule,ReactiveFormsModule,FormsModule
   // AlertModule,DatepickerModule,Ng2BootstrapModule

],
    declarations: [AppComponent,
    PageNotFoundComponent

],
   providers: [
    appRoutingProviders
     ],
      bootstrap: [AppComponent]
 })
   export class AppModule { }

The Add component where I am using ReactiveFormModule is

 import { Component, OnInit, OnDestroy } from '@angular/core';
 import { Router, ActivatedRoute }       from '@angular/router';
 import { MileStoneService } from './milestone.service';
 import { MileStoneModel } from './milestoneModel';
 import { FormBuilder, FormGroup  ,FormControl } from '@angular/forms';
 import { Subscription } from 'rxjs/Subscription';

 @Component(
     {
    moduleId: module.id,
    templateUrl:'./milestoneadd.html'
    ,

    providers: [MileStoneService]


}
 )
 export class MileStoneAddComponent implements OnInit {
     newMileStone = new MileStoneModel();
     errorMessage: string;
     form : FormGroup;

constructor( private _service: MileStoneService) {


}

     ngOnInit() {

    // the long way
    this.form = new FormGroup({
    Id: new FormControl(),
    Name: new FormControl(),
    StartDate: new FormControl()
     });

     }


     private saveMileStone(mileStone: MileStoneModel) {
         this._service.addMileStone(mileStone).subscribe(
        milestones => this.newMileStone = milestones,
        error => this.errorMessage = <any>error);
     }

 }

The HTML code is below

 <div class="row">
     <div class="md-col-8">
         <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title"> Add MileStone</h3>
        </div>
        <div class="panel-body">
            <form  [formGroup]="form">
                <div class="form-group">
                    <div class="md-col-4">
                        <label>  MileStone Name:</label>
                    </div>
                    <div class="md-col-4">
                        <input  formControlName="Name"  />
                        <input type="hidden" formControlName="Id" />
                    </div>

                </div>
                <div class="form-group">
                    <div class="md-col-4"><label> StartDate</label></div>
                    <div class="md-col-4">

                        <input formControlName="StartDate"  />



                    </div>
                </div>
                <div class="btn-group pull-right" role="group" aria-           label="...">

                    <button type="button" class="btn btn-primary pull-left">Cancel</button>
                    &nbsp;

            <button type="button"  (click)="saveMileStone(newMileStone)" class="btn btn-primary pull-right">Save</button>
                </div>
            </form>

            {{ newMileStone|json }}
        </div>
        </div>
       </div>
          </div>

The package.json file is below .

   {
     "name": "angular-quickstart",
    "version": "1.0.0",
    "scripts": {
      "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
      "lite": "lite-server",
      "postinstall": "typings install",
      "tsc": "tsc",
      "tsc:w": "tsc -w",
      "typings": "typings"
                 },
          "license": "ISC",
          "dependencies": {
            "@angular/common": "~2.0.1",
            "@angular/compiler": "~2.0.1",
            "@angular/core": "~2.0.1",
            "@angular/forms": "~2.0.1",
            "@angular/http": "~2.0.1",
            "@angular/platform-browser": "~2.0.1",
            "@angular/platform-browser-dynamic": "~2.0.1",
            "@angular/router": "~3.0.1",
            "@angular/upgrade": "~2.0.1",
            "angular-in-memory-web-api": "~0.1.1",
            "bootstrap": "^3.3.7",
            "core-js": "^2.4.1",
            "reflect-metadata": "^0.1.8",
            "rxjs": "5.0.0-beta.12",
            "systemjs": "0.19.39",
            "zone.js": "^0.6.25",
            "jquery": "^3.1.1"
          },
          "devDependencies": {
            "concurrently": "^3.0.0",
            "lite-server": "^2.2.2",
            "typescript": "^2.0.3",
            "typings": "^1.4.0",
             "gulp": "^3.9.1",
            "q": "^1.4.1",
            "grunt": "1.0.1",
            "grunt-contrib-copy": "1.0.0",
            "grunt-contrib-uglify": "1.0.1",
            "grunt-contrib-watch": "1.0.0",
            "grunt-ts": "5.5.1"
          }
        }

enter image description here

Upvotes: 0

Views: 3392

Answers (2)

Mark Rajcok
Mark Rajcok

Reputation: 364707

See Angular Module FAQ: What does "Can't bind to 'x' since it isn't a known property of 'y'" mean?
In your case, this part applies:

This error usually means either that you neglected to declare the directive "x" or you haven't imported the module to which "x" belongs.

Also (and probably more helpful, based on your interaction with @Siraj), the Angular Modules guide mentions the following:

Modules do not inherit access to the components, directives or pipes that are declared in other modules. What AppModule imports is irrelevant to [other modules] and vice versa.

You have two choices (pick one):

  1. Create a shared module that re-exports the FormsModule and ReactiveFormModule (in the module's exports list). Then import this shared module in your sub/feature module (in the sub module's imports list).
    See @JohnBaird's answer for an example.
    What ModuleA exports is relevant to other modules, if they import ModuleA.
  2. Add FormsModule and ReactiveFormModule to your sub/feature module's imports list.

Upvotes: 2

John Baird
John Baird

Reputation: 2676

You have to use a shared module (I left out all the imports):

@NgModule({
      imports: [CommonModule, RouterModule, MenubarModule, InputTextModule ], 
      declarations: [ ErrorMessagesComponent],
      exports: [ CommonModule, ReactiveFormsModule, HttpModule, RouterModule,
                InputTextModule, ErrorMessagesComponentng  ] 
   })

   export class SharedModule {
      static forRoot(): ModuleWithProviders {
      return {
         ngModule: SharedModule,
         providers: [ AuthorizationService ]
      };
   }
}

In the app.module.ts (notice the SharedModule.forRoot):

@NgModule({
    imports: [ BrowserModule, RouterModule.forRoot(appRoutes), SharedModule.forRoot(), 
               HomeModule ],
    declarations: [ AppComponent ],
    bootstrap: [ AppComponent ],
    providers: [ appRoutingProviders ]
}) 

export class AppModule {} 

To use it in another module:

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


@NgModule({
    imports: [ SharedModule, routing],
    declarations: [ HomeComponent, LoginComponent, RegisterComponent, VerifyComponent, 
                   VerifyEmailComponent, ForgotComponent, ForgotVerifyComponent, 
                   ChangeComponent, ChallengeComponent, LogoutComponent ], 
    bootstrap: [ HomeComponent ],
    providers: [ ]

}) 

export class HomeModule {} 

Upvotes: 2

Related Questions