Can not use ReactiveFormsModule

Question

I am trying to use ReactiveFormsModule in a project. So I added it to the app.module.ts:

import { NgModule }                                     from '@angular/core';
import { FormsModule, ReactiveFormsModule }             from '@angular/forms';
import { BrowserModule }                                from '@angular/platform-browser';
import { LocationStrategy,
         HashLocationStrategy }                         from '@angular/common';

import { AppComponent }                                 from './app.component';
import { Ng2BootstrapModule }                           from 'ng2-bootstrap/ng2-bootstrap';
import { NAV_DROPDOWN_DIRECTIVES }                      from './shared/nav-dropdown.directive';

import { ChartsModule }                                 from 'ng2-charts/ng2-charts';
import { SIDEBAR_TOGGLE_DIRECTIVES }                    from './shared/sidebar.directive';
import { AsideToggleDirective }                         from './shared/aside.directive';
import { BreadcrumbsComponent }                         from './shared/breadcrumb.component';

// Routing Module
import { AppRoutingModule }                             from './app.routing';

//Layouts
import { FullLayoutComponent }                          from './layouts/full-layout.component';
import { SimpleLayoutComponent }                        from './layouts/simple-layout.component';

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        ReactiveFormsModule,
        AppRoutingModule,
        Ng2BootstrapModule,
        ChartsModule,

    ],
    declarations: [
        AppComponent,
        FullLayoutComponent,
        SimpleLayoutComponent,
        NAV_DROPDOWN_DIRECTIVES,
        BreadcrumbsComponent,
        SIDEBAR_TOGGLE_DIRECTIVES,
        AsideToggleDirective
    ],
    providers: [{
        provide: LocationStrategy,
        useClass: HashLocationStrategy
    }],
    bootstrap: [ AppComponent ]
})
export class AppModule { }

And this is my component:

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

@Component({
    templateUrl: 'login.component.html'
})
export class LoginComponent implements OnInit {
    loginForm: FormGroup;

    constructor( ) {
        this.loginForm = new FormGroup({});
    }

    ngOnInit(): void {

    }
}

My template:

<div class="container d-table">
    <div class="d-100vh-va-middle">
        <div class="row">
            <div class="col-md-8 offset-md-2">
                <div class="card-group">
                    <div class="card p-2">
                        <div class="card-block">
                            <form [formGroup]="loginForm">
                                <h1>Ingreso</h1>
                                <p class="text-muted">Ingrese a su cuenta</p>
                                <div class="input-group mb-1">
                                    <span class="input-group-addon"><i class="icon-user"></i>
                                    </span>
                                    <input type="text" class="form-control" placeholder="Usuario">
                                </div>
                                <div class="input-group mb-2">
                                    <span class="input-group-addon"><i class="icon-lock"></i>
                                    </span>
                                    <input type="password" class="form-control" placeholder="Contraseña">
                                </div>
                                <div class="row">
                                    <div class="col-xs-6">
                                        <button type="button" class="btn btn-primary px-2">Ingresar</button>
                                    </div>
                                    <div class="col-xs-6 text-xs-right">
                                        <button type="button" class="btn btn-link px-0">Olvidó su contraseña?</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

And the login.module.ts:

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

import { LoginComponent }       from './login.component';
import { LoginRoutingModule }   from './login-routing.module';

@NgModule({
    imports: [
        LoginRoutingModule
    ],
    declarations: [ LoginComponent ]
})
export class LoginModule { }

But I get the well known:

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

It is supposed to appear when ReactiveFormsModule is not included in the app.module, but as you can see, it is imported. How can I solve it?

Answer 1

LoginComponent is not declared in AppModule where ReactiveFormsModule is provided, it is declared in LoginModule, which means you need to import ReactiveFormsModule there in order to create reactive forms in LoginComponent:

import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';

import { LoginComponent } from './login.component';
import { LoginRoutingModule } from './login-routing.module';

@NgModule({
    imports: [
        ReactiveFormsModule,
        LoginRoutingModule
    ],
    declarations: [ LoginComponent ]
})

export class LoginModule { }