不能使用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 { } 

但一世 获取众所周知的：

不能绑定到“formGroup”，因为它不是“形式”

它应该出现的时候在app.module不包括ReactiveFormsModule的已知属性，但正如你所看到的，它是导入的。我该如何解决它？

Answer 1

LoginComponent在提供ReactiveFormsModule不AppModule宣布，它在LoginModule声明，这意味着你需要为了在LoginComponent创建反应形式导入ReactiveFormsModule有：

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