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

Question

I've had this error lots of times and I've always been able to fix it but I think I'm overlooking something this time and I can't get it too work.

As stated in the title, the error I get is Can't bind to 'formGroup' since it isn't a known property of 'form'. for the following line of code: <form [formGroup]="contactSettings">.

I already checked all stackoverflow posts but they all come down to add the ReactiveFormsModule to the module that makes use of ReactiveForms. In my case, which was also in various stackoverflow posts, I should export the ReactiveFormsModule in my SharedModule and import that SharedModule in my ContactModule that actually uses the ReactiveFormsModule. I don't see what I'm doing wrong.

contact-settings.component.html

<form [formGroup]="contactSettings">

</form>

contact-settings.component.ts

export class ContactSettingsComponent extends FormComponent {

  contactSettings: FormGroup = this.fb.group({ //Moving this to constructor or onInit does not fix it
    firstName: ["First name"],
    lastName: ["Last name"],
    emailAdress: ["email", Validators.email],
    gender: ["male"],
    parentCustomerId: ["Parent customer name"],
    language: ["Language"],
    telephone: ["Telephone number"],
    mobilephone: ["Mobile phone number"],
  });

  constructor(private fb: FormBuilder, private contactService: ContactService) {
    super();
  }
}

contact.module.ts

... //imports

@NgModule({
  declarations: [
    ContactSettingsComponent
  ],
  imports: [
    ContactRoutingModule,
    SharedMaterialModule, // <--- contains export ReactiveFormsModule and FormsModule
    SharedComponentsModule
  ]
})
export class ContactModule { }

shared-material.module.ts

... //Angular Material imports

//CommonModule
import { CommonModule } from "@angular/common";

//Forms
import { ReactiveFormsModule, FormsModule } from "@angular/forms";

//Browser
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { BrowserModule } from "@angular/platform-browser";

@NgModule({
  //Normally imports are here, but the template I bought does not have this and adding it doesn't fix it either. It worked normally before.
  exports: [
    //CommonModule
    CommonModule,
    //Browser animations
    BrowserModule,
    BrowserAnimationsModule,
    //Forms
    ReactiveFormsModule, // <--- clearly present here
    FormsModule,
    //Angular Material Modules
    ...
  ]
})

export class SharedMaterialModule {}

score 0 · Accepted Answer · answered Jun 23 '20 at 10:52

My imports were done perfectly. The problem was that my ContactModule was never used in any other module. I had to add load the ContactModule by adding the following code block to my app-routing.module.

      {
        path: 'contact',
        loadChildren: () => import('./views/contact/contact.module').then(m => m.ContactModule)
      }

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

1 Answers1