انگولار - نمیتوان از ReactiveFormsModule استفاده کرد

من در حال تلاش برای استفاده از ReactiveFormsModule در یک پروژه هستم. بنابراین آن را به 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 { }

و این جزئیات من است:

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 {

    }
}

قالب من:

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

و 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 { }

اما من آن معروف را میگیرم:

نمیتوان به 'formGroup' متصل شد زیرا این یک ویژگی شناختهشده از 'form' نیست

این قرار است زمانی ظاهر شود که ReactiveFormsModule در app.module شامل نشده باشد، اما همانطور که میبینید، وارد شده است. چگونه میتوانم آن را حل کنم؟

پاسخ شماره ۱

LoginComponent در AppModule که ReactiveFormsModule در آن ارائه شده است اعلام نشده است، این کامپوننت در LoginModule اعلام شده است، که به این معنی است که شما باید ReactiveFormsModule را در آنجا وارد کنید تا بتوانید فرمهای واکنشی را در 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 { }

پاسخ شماره ۲

در مورد من، من FormsModule را در فایل app.module.ts شما گنجاندم