angular - Nu se poate folosi ReactiveFormsModule

Încerc să folosesc ReactiveFormsModule într-un proiect. Așa că l-am adăugat în 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 { }

Și acesta este componentul meu:

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 {

    }
}

Șablonul meu:

<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>

Și 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 { }

Dar eu primesc binecunoscutul:

Nu se poate lega la 'formGroup' deoarece nu este o proprietate cunoscută a 'form'

Se presupune că ar trebui să apară atunci când ReactiveFormsModule nu este inclus în app.module, dar după cum puteți vedea, este importat. Cum pot să rezolv asta?

Răspuns #1

LoginComponent nu este declarat în AppModule, unde este furnizat ReactiveFormsModule, este declarat în LoginModule, ceea ce înseamnă că trebuie să importați ReactiveFormsModule acolo pentru a crea formulare reactive în 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 { }

Răspunsul #2

În cazul meu, am inclus FormsModule în app.module.ts-ul tău