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

mnu-nasir

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.
    
Arash Hatami

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

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

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

Can't bind to 'FormGroup' since it isn't a known property of 'form' ----

Can't bind to 'FormGroup' since it isn't a known property of 'form'. ("

Form builder angular Can't bind to 'formGroup' since it isn't a known property of 'form'

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

Angular 6: Can't bind to 'formGroup' since it isn't a known property of 'form'?

Angular2 : Can't bind to 'formGroup' since it isn't a known property of 'form'

Angular 7 testing: "Can't bind to formGroup since it isn't a known property of form"

Angular 10 - can't bind to 'formGroup' since it isn't a known property of 'form'

Angular 16 Standalone component, "Can't bind to 'formGroup' since it isn't a known property of 'form'"

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

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

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

Angular error message: Can't bind to 'formGroup' since it isn't a known property of 'form'

Angular Ivy: Can't bind to 'formGroup' since it isn't a known property of 'form'. However ReactiveFormsModule and FormsModule is imported

Angular unit test error - Can't bind to 'formGroup' since it isn't a known property of 'form'

Angular 16 - can't bind to 'formGroup' since it isn't a known property of 'form'

Angular 15+ - Can't bind to 'formGroup' since it isn't a known property of 'form' even after adding in modules

Can't bind to 'formGroup' since it isn't a known property of 'form' whilst using SharedModule

Can't bind to 'formGroup' since it isn't a known property of 'form'. ReactiveFormsModule already imported

Can't bind to 'formGroup' since it isn't a known property of 'form'. error in ionic v5.2.2

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

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

Can't bind to 'formGroup' since it isn't a known property of 'form' for second component

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

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

Angular Can't bind to 'dirUnless' since it isn't a known property

Angular 5 - Can't bind to 'ngFormOptions' since it isn't a known property of 'form'

Can't bind to property since it isn't a known property of a component