after adding ReactiveFormsModule in app.module still it shows Can’t bind to ‘formGroup’ since it isn't a known property of ‘form’ Angular 9.1.13

Question

I have added an add-classroom component in the classroom module which I had created. and now if I try to open that particular page it shows Can’t bind to ‘formGroup’ since it isn't a known property of ‘form’. even if I have already imported FormModule, ReactiveFormsModule in app.module.ts

add-classroom.component.html

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@Component({
  selector: 'app-add-classroom',
  templateUrl: './add-classroom.component.html',
  styleUrls: ['./add-classroom.component.css']
})
export class AddClassroomComponent implements OnInit {
  classroomForm: FormGroup;
  constructor(private fb: FormBuilder) { }

  ngOnInit(): void {
    this.classroomForm = this.fb.group({
      name: ['', Validators.required ],
      email:['',Validators.pattern("^([a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4},?)+$")],
   });
  }

}

classrooms.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { ClassroomsRoutingModule } from './classrooms-routing.module';
import { AddClassroomComponent } from './add-classroom/add-classroom.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [AddClassroomComponent],
  imports: [
    CommonModule,
    ClassroomsRoutingModule
  ]
})
export class ClassroomsModule { }

app.module.ts

import {NgModule} from '@angular/core';
import {LocationStrategy, HashLocationStrategy} from '@angular/common';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

import {PerfectScrollbarModule} from 'ngx-perfect-scrollbar';
import {PERFECT_SCROLLBAR_CONFIG} from 'ngx-perfect-scrollbar';
import {PerfectScrollbarConfigInterface} from 'ngx-perfect-scrollbar';

const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
  suppressScrollX: true
};

import {AppComponent} from './app.component';

// Import containers
import {DefaultLayoutComponent} from './containers';

import {P404Component} from './views/error/404.component';
import {P500Component} from './views/error/500.component';

const APP_CONTAINERS = [
  DefaultLayoutComponent
];

import {
  AppAsideModule,
  AppBreadcrumbModule,
  AppHeaderModule,
  AppFooterModule,
  AppSidebarModule,
} from '@coreui/angular';

// Import routing module
import {AppRoutingModule} from './app.routing';

// Import 3rd party components
import {BsDropdownModule} from 'ngx-bootstrap/dropdown';
import {TabsModule} from 'ngx-bootstrap/tabs';
import {ChartsModule} from 'ng2-charts';
import {MarkdownModule} from 'ngx-markdown';
import {AceEditorModule} from 'ng2-ace-editor';
import 'ace-builds/src-noconflict/ace';
import 'ace-builds/webpack-resolver';
import {CollapseModule} from 'ngx-bootstrap/collapse';
import {HttpClientModule} from '@angular/common/http';
import {UserAssignmentViewComponent} from './views/user-assignments/user-assignment-view/user-assignment-view.component';
import {ViewQuestionComponent} from './views/user-assignments/view-question/view-question.component';
import {FormsModule,ReactiveFormsModule} from '@angular/forms';
import {FlexLayoutModule} from '@angular/flex-layout';
import {TooltipModule} from 'ngx-bootstrap/tooltip';
import {AngularFireModule} from '@angular/fire';
import {AngularFireAuthModule} from '@angular/fire/auth';
import {environment} from '../environments/environment';
import {AuthComponent} from './views/auth/auth.component';
import {authInterceptorProviders} from './views/auth/token.interceptor';
import {ModalModule} from 'ngx-bootstrap/modal';
//import { TempComponent } from './views/classroom/temp/temp.component';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    AppAsideModule,
    AppBreadcrumbModule.forRoot(),
    AppFooterModule,
    AppHeaderModule,
    AppSidebarModule,
    PerfectScrollbarModule,
    BsDropdownModule.forRoot(),
    ModalModule.forRoot(),
    TabsModule.forRoot(),
    ChartsModule,
    MarkdownModule.forRoot(),
    AceEditorModule,
    HttpClientModule,
    FormsModule,
    FlexLayoutModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFireAuthModule,
    ReactiveFormsModule,
    TooltipModule.forRoot(),
  ],
  declarations: [
    AppComponent,
    ...APP_CONTAINERS,
    P404Component,
    P500Component,
    UserAssignmentViewComponent,
    ViewQuestionComponent,
    AuthComponent,
    //TempComponent,
    //InstructorDashboardComponent,

    //AddClassroomComponent,
  ],
  providers: [{
    provide: LocationStrategy,
    useClass: HashLocationStrategy
  },
    authInterceptorProviders
  ],
  bootstrap: [AppComponent],
})
export class AppModule {
}

Naseer Naseer · Accepted Answer · 2021-01-21T08:02:19

Update the classrooms.module.ts by adding FormsModule and ReactiveFormsModule in the imports section.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { ClassroomsRoutingModule } from './classrooms-routing.module';
import { AddClassroomComponent } from './add-classroom/add-classroom.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [AddClassroomComponent],
  imports: [
    CommonModule,
    ClassroomsRoutingModule,
    FormsModule,
    ReactiveFormsModule
  ]
})
export class ClassroomsModule { }

Angular in combination with feature modules requires you to also export the ReactiveFormsModule to work.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { ClassroomsRoutingModule } from './classrooms-routing.module';
import { AddClassroomComponent } from './add-classroom/add-classroom.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [AddClassroomComponent],
  imports: [
    CommonModule,
    ClassroomsRoutingModule,
    FormsModule,
    ReactiveFormsModule
  ],
  exports: [
   CommonModule,
   FormsModule,
   ReactiveFormsModule
 ]
})
export class ClassroomsModule { }

after adding ReactiveFormsModule in app.module still it shows Can’t bind to ‘formGroup’ since it isn't a known property of ‘form’ Angular 9.1.13

1 Answers