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

Question

I created new app with 2 moodule, when I try to add form to one of my modules I'm getting error:

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

I know this is quite common issue so I google a bit and made sure I have ReactiveFormsModule in my module before I wrote this ticket. But I still see an error so issue is obviously there, because of that here is my code:

// app.module.ts
@NgModule({
  declarations: [AppComponent],
  imports: [
    AppRoutingModule,
    BrowserModule,
    HttpClientModule,
    ReactiveFormsModule,
  ],
  providers: [
    // My providers
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

In App modul everything works fine, if I try to make form there things works without any issue.

// auth.module.ts
@NgModule({
  imports: [CommonModule, ReactiveFormsModule, RouterModule],
  declarations: [LoginComponent],
  providers: [
    // My providers
  ],
})
export class AuthModule {}

Inside my LoginComponent(which is registered in AuthModule I have code like this:

  public form: FormGroup;

  constructor(private fb: FormBuilder) {}
  public ngOnInit(): void {
    this.form = this.fb.group({
      username: ['', [Validators.required]],
      password: ['', Validators.required],
    });
  }

and my template is simple as this:

<form [formGroup]="form"></form>

I verified milion times that I have ReactiveFormsModule imported in both of my modules and also that I have everything saved. I restarted CLI multiple times to make sure it just didn't freez somewhere.

I am out of ideas what I'm doing wrong.

Duplicate: https://stackoverflow.com/questions/39152071/cant-bind-to-formgroup-since-it-isnt-a-known-property-of-form — Lunik, Apr 15 '20 at 12:55
It's not duplicate as I have `ReactiveFormsModule` on it's place. — Andurit, Apr 15 '20 at 12:56
Just for checking, Have you tried removing auth.module? and add your component in app.module — Niraj Patel, Apr 15 '20 at 13:11
@Niraj Patel If I add LoginComponent to `app.module.ts` and comment it out from `auth.module.ts` it compile without issues. But it's not solution I'm looking for :( — Andurit, Apr 15 '20 at 13:16
Just to be sure, Please check ReactiveFormsModule is imported from "@angular/forms". — Niraj Patel, Apr 15 '20 at 13:17
@Lunik I don't think this is solution I would like to go with. It's seems a bit ugly :) — Andurit, Apr 15 '20 at 13:35
I'm sorry can you be more exact what you mean by 'snapshot'? Do you want me to make demo on stackbiz or so? — Andurit, Apr 15 '20 at 13:43
I mean the image of your error. Your console error's image. And yeah if you put the code up on stackblitz that would could be beneficial as well — Wahab Shah, Apr 15 '20 at 13:45
Sure thing, share that kindly. And have you tried adding FormsModule as well and then ng serving the project again? — Wahab Shah, Apr 15 '20 at 13:50
ADDING stackblitz - https://stackblitz.com/edit/angular-pxvfim - it's throwing some errors now and I try to fix it but this should already give some nice overview how code looks like — Andurit, Apr 15 '20 at 14:09

score 1 · Answer 1 · answered Apr 15 '20 at 13:36

1

You'll need to import BOTH FormsModule and ReactiveFormsModule in your AuthModule

// auth.module.ts
@NgModule({
  imports: [CommonModule, FormsModule, ReactiveFormsModule, RouterModule],
  declarations: [LoginComponent],
  providers: [
    // My providers
  ],
})
export class AuthModule {}

answered Apr 15 '20 at 13:36

C_Ogoo

5,365
3
17
34

Tested, not helped :( – Andurit Apr 15 '20 at 13:38
Just to clarify, Login component is where you use the form? – C_Ogoo Apr 15 '20 at 13:38
Yes @C_Ogoo, form is part of `LoginComponent` – Andurit Apr 15 '20 at 13:40
and authModule is lazy loaded? – C_Ogoo Apr 15 '20 at 13:40
Nope, in `app-routing.module.ts` I just reference auth routes: ` { path: 'admin', children: adminRoutes, }, ` Routes seems to work without issues as well – Andurit Apr 15 '20 at 13:42
Hmm, then I dont think your `AuthModule` is doing anything, import the FormModule into the AppModule instead – C_Ogoo Apr 15 '20 at 13:45
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/211721/discussion-between-andurit-and-c-ogoo). – Andurit Apr 15 '20 at 13:50

score 0 · Accepted Answer · answered Apr 15 '20 at 14:27

You should import AuthModule to your AppModule. Refer Documentation

// app.module.ts
@NgModule({
  declarations: [AppComponent],
  imports: [
    AppRoutingModule,
    BrowserModule,
    HttpClientModule,
    ReactiveFormsModule,
    AuthModule
  ],
  providers: [
    // My providers
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

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

2 Answers2