angular - 不能使用 ReactiveFormsModule

Question

我正在尝试在项目中使用 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 { }

但我得到了众所周知的:

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

它应该在 ReactiveFormsModule 不包含在 app.module 中时出现，但如您所见，它是导入的。我该如何解决？

Answer 1

LoginComponent 不是在提供ReactiveFormsModule 的AppModule 中声明的，它是在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 { }