ReactiveFormsModule in Angular is not working with [formGroup] (I've looked everywhere)

Question

I've looked for an answer to this and everyone says that it would be resolved just by adding ReactiveFormsModule to the module. The problem is that [formGroup] is not recognized. The solutions I've found say that I only need to add the imports to the modules, but it's simply not working. Here's what I'm doing:

1.- In app.module.ts, I added a router module MyRouterModule in the imports array. I also added both FormsModule and ReactiveFormsModule:

import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';

import { MyRouterModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    RouterModule,
    MyRouterModule,
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2.-In MyRouterModule I also added both form modules:

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';
import { InicioComponent } from './inicio/inicio.component';

const routes: Routes = [
  { path: '', component: InicioComponent }
];

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

3.- The component has a very basic structure so far, just for testing:

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-inicio',
  templateUrl: './inicio.component.html',
  styleUrls: ['./inicio.component.css']
})
export class InicioComponent implements OnInit {

  theForm:FormGroup = new FormGroup({
    usuario: new FormControl('', Validators.required),
    contrasena: new FormControl('', Validators.required)
  });

  constructor() { }

  ngOnInit(): void {
    
  }

}

4.- The component template has nothing in particular:

<div>
    <form [formGroup]="theForm">
        <input type="text" formControlName="usuario" />
        <br />
        <input type="password" formControlName="contrasena" />

        <br />
        <button type="button" [disabled]="!theForm.valid">Aceptar</button>
    </form>
</div>

What am I missing? I've followed tutorials, blogs, videos, copy-pasted the code, and nothing works. The error is Can't bind to 'formGroup' since it isn't a known property of 'form'.

Answer 1

First of all, you need only one Forms module. In you case it's ReactiveFormsModule. And remove all useless imports from your routing module, - it's not for that.

const routes: Routes = [
  { path: '', component: InicioComponent }
];

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

Then you have to declare your InicioComponent in some module. Suppose you use it in AppComponent, then you should do this:

@NgModule({
  declarations: [
    AppComponent,
    InicioComponent,
  ],
  imports: [
    BrowserModule,
    MyRouterModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

This should work.