Can't bind to 'formGroup' since it isn't a known property of 'form' in Angular

0
votes

I am developing an Angular 10 application. I have several modules. There is a Shared Module, there I imported "FormsModule" and "ReactiveFormsModule". Now in my Setup Module I have a component. I am trying to develop a reactive form here. The component name is ExpenseHeadComponent. The code is below:

HTML Form:

<form [formGroup]="frmExpenseHead">
  <div class="form-group row">
    <label for="Code" class="col-sm-12 col-form-label">Code</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="code" name="code" formControlName="code">
    </div>    
  </div>
</form>

TS file is:

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
    
@Component({
  selector: 'app-expense-head',
  templateUrl: './expense-head.component.html',
  styleUrls: ['./expense-head.component.css']
})
export class ExpenseHeadComponent implements OnInit {
  frmExpenseHead: FormGroup;
  
  constructor() { }

  ngOnInit() {
    this.frmExpenseHead = new FormGroup({
      code: new FormControl("", Validators.required),          
    });
  }
}

Setup Module

@NgModule({
  imports: [
    RouterModule.forChild(setupRoutes),
    CommonModule,
    SharedModuleModule,    
  ],
  declarations: [
    CompanyComponent,
    IncomeHeadListComponent,
    ExpenseHeadListComponent,
    ExpenseHeadComponent,
    IncomeHeadComponent,
    MemberListComponent,
    SetupModuleComponent
  ]
})
export class SetupModuleModule { }

Shared Module

@NgModule({
  imports: [
    RouterModule.forChild(sharedRoutes),
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    NgbModule,
  ],
  exports: [
    HeaderComponent,
    NavigationComponent,
    NOFoundComponentComponent,
    NavigateBackComponent,
    ErrorPageComponent,
  ],
  declarations: [
    HeaderComponent,
    NavigationComponent,
    NOFoundComponentComponent,
    NavigateBackComponent,
    ErrorPageComponent,
    SharedModuleComponent
  ]
})
export class SharedModuleModule { }

Here it shows that, in Shared Module I have imported FormsModule, ReactiveFormsModule, and in Setup Module I have imported the shared module. But still I am getting the below error message:

ERROR in src/app/setup-module/pages/expense-head/expense-head.component.html:1:7

  • error NG8002: Can't bind to 'formGroup' since it isn't a known property of 'form'.

    1 <form [formGroup]="frmExpenseHead"> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    src/app/setup-module/pages/expense-head/expense-head.component.ts:7:16
  7   templateUrl: './expense-head.component.html',
                   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  Error occurs in the template of component ExpenseHeadComponent.
1
angularangular-reactive-forms

1 Answers

2
votes

Hi you should export ReactiveFormsModule and FormsModule in SharedModuleModule .

An export what you put is the exports property of the @NgModule decorator. It enables an Angular module to expose some of its components/directives/pipes to the other modules in the applications. Without it, the components/directives/pipes defined in a module could only be used in that module.

Shared Module

@NgModule({
  imports: [
    RouterModule.forChild(sharedRoutes),
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    NgbModule,
  ],
  exports: [
    FormsModule, //forgotten to export
    ReactiveFormsModule, //forgotten to export
    HeaderComponent,
    NavigationComponent,
    NOFoundComponentComponent,
    NavigateBackComponent,
    ErrorPageComponent,
  ],
  declarations: [
    HeaderComponent,
    NavigationComponent,
    NOFoundComponentComponent,
    NavigateBackComponent,
    ErrorPageComponent,
    SharedModuleComponent
  ]
})
export class SharedModuleModule { }