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

Issue

I have component LoginComponent in UsersModule

  @NgModule({
  declarations: [
    UsersComponent,
    LoginComponent
  ],
  imports: [
    ReactiveFormsModule
  ],
  providers: [
  ]
})
export class UsersModule { }

why i cant bind to ‘formGroup’ ? I imported the necessary module (ReactiveFormsModule)

Maybe it’s because i use LoginComponent in here?
(AppRoutingModule)

const routes: Routes = [
  {
    path: '',
    component: MainComponent,
  },
  {
    path: 'users',
    component: UsersComponent,
  },
  {
    path: 'login',
    component: LoginComponent,
  },
  {
    path: '**',
    redirectTo: '',
  },
]

@NgModule({
  imports: [
    RouterModule.forRoot(routes),
    FormsModule,
    ReactiveFormsModule],
  exports: [RouterModule],
})
export class AppRoutingModule {}

Help pls.
in template

<div class="login-container">
    <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
    <label for="username"> Name
      <input type="text" id="username"  formControlName="username">
    </label>
    <label for="password"> Pass
      <input type="password" id="password"  formControlName="password">
    </label>
    <button class="btn blue">Enter</button>
    </form>
  </div>

Solution

Did you import UsersModule to AppModule?

@NgModule({
  declarations: [AppComponent],
  imports: [
   ... some modules
   UsersModule,
    ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {} 

You cant build app if you do not import modules to AppModule

Answered By – mzkrgkmay

Answer Checked By – Marilyn (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.