Template parse errors: Can't bind to 'formGroup' since it isn't a known property of 'form'

Question

I have an angular routing , in one of the component i have simple login form and provide the formGroup in template ,which shows above error.

Steps: Import the ReactiveFormsModule in app module.

In Routing components:

app.routingmodule.ts

import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { LoginViewComponent } from './views/login/login.component';
import { HomeViewComponent } from './views/home/home.component';
import { CatalogViewComponent } from './views/catalog/catalog.component';

@NgModule({
  declarations: [ 
    LoginViewComponent, HomeViewComponent, CatalogViewComponent
  ],
  imports: [
    RouterModule.forRoot([
      { path: 'login', component: LoginViewComponent },
      { path: 'home', component: HomeViewComponent },
      { path: 'catalog', component: CatalogViewComponent },
      { path: '**', redirectTo: 'login' }
    ])
  ],
  exports: [
    RouterModule
  ],
  providers: [],

})
export class AppRoutingModule {}

catalog.component.ts

import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http';


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

@Component({
  selector: 'reactiveform',
  templateUrl: 'catalog.component.html',
})
export class CatalogViewComponent implements OnInit {

  form: FormGroup;

  constructor() {


  }


  ngOnInit() {

    this.form = new FormGroup({
      name: new FormControl(''),
      userName: new FormControl('')
    });

    console.log(this.form);

  }


  processForm() {
    console.log("formProcessing" + this.form.value);
  }
}

catalog.component.html

<form [formGroup]="form" (ngSubmit)="processForm()" >
    <div class="form-group">
        <label for="name">Name </label>
        <input type="text" class="form-control" name="name" formControlName="name" required>
    </div>

    <div class="form-group">
        <label for="userName">Username </label>
        <input type="text" class="form-control" name="userName" formControlName="userName" required>
    </div>

    <div class="form-group">
        <button type="submit" class="btn btn-danger">Submit   </button>
    </div>
</form>

Demo URL:

https://stackblitz.com/edit/angular-router-basic-form?file=app%2Fviews%2Fcatalog%2Fcatalog.component.html

If I remove the formGroup in Html, the application works fine

Answer 1

You declared CatalogViewComponent in AppRoutingModule therefore you have to import ReactiveFormsModule there:

app.routing.module.ts

@NgModule({
  declarations: [ 
    LoginViewComponent, HomeViewComponent, CatalogViewComponent
  ],
  imports: [
    ReactiveFormsModule, <=============================== add this
    RouterModule.forRoot([
      { path: 'login', component: LoginViewComponent },
      { path: 'home', component: HomeViewComponent },
      { path: 'catalog', component: CatalogViewComponent },
      { path: '**', redirectTo: 'login' }
    ])
  ],
  exports: [
    RouterModule
  ],
  providers: [],

})
export class AppRoutingModule {}

Forker Stackblitz

See also

• Angular 2 Use component from another module

Another way is to create SharedModule:

@NgModule({
  ...
  exports: [
    ReactiveFormsModule
  ]
})
export class SharedModule {}

And import it in any module where you use reactive forms