Angular 6 - 使用延迟加载模块时出现 react 形式问题

Question

我正在尝试创建一个具有两个功能模块(延迟加载)的应用程序:公共(public)模块和管理模块。在公共(public)模块中，我正在创建一个登录表单。在应用程序模块中，我导入了 ReactiveFormsModule。下面是login.component.ts文件代码

import { AppService } from './../../app.service';
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  loginForm: FormGroup;

  constructor(private service: AppService) { }

  ngOnInit() {
    this.loginForm = new FormGroup({
      'email': new FormControl(null),
      'password': new FormControl(null)
    });
  }

  onSubmit() {
    console.log(this.loginForm);
  }

}

对应的html文件代码为

<section>
  <form class="form-signin" [formGroup]="loginForm" (ngSubmit)="onSubmit()">   
    <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
    <label for="inputEmail" class="sr-only">Email address</label>
    <input type="email" id="inputEmail" class="form-control" placeholder="Email address" formControlName="email" required autofocus email>
    <label for="inputPassword" class="sr-only">Password</label>
    <input type="password" id="inputPassword" class="form-control" placeholder="Password" formControlName="password" required>    
    <button class="btn btn-lg btn-primary btn-block" type="submit">Submit</button>
    <p class="mt-5 mb-3 text-muted">&copy; 2017-2018</p>
  </form>
</section>

下面是AppModule.ts文件

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

当我这样做时，我在浏览器控制台面板中收到以下错误

ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'formGroup' since it isn't a known property of 'form'. ("<section>
  <form class="form-signin" [ERROR ->][formGroup]="loginForm" (ngSubmit)="onSubmit()">   
    <h1 class="h3 mb-3 font-weight-normal">Please"): ng:///PublicRoutingModule/LoginComponent.html@1:28
Error: Template parse errors:
Can't bind to 'formGroup' since it isn't a known property of 'form'. ("<section>
  <form class="form-signin" [ERROR ->][formGroup]="loginForm" (ngSubmit)="onSubmit()">   
    <h1 class="h3 mb-3 font-weight-normal">Please"): ng:///PublicRoutingModule/LoginComponent.html@1:28

请帮忙

Answer 1

您的模块应导入FormsModule、ReactiveFormsModule。