错误NG8002：无法绑定到'formGroup'，因为它不是'form'的已知属性。在Angular 9中

Question

我刚刚创建了一个带有子模块的新Angular 9应用。那是我的app.modules.ts：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { HttpClientModule } from '@angular/common/http';
import { HomeComponent } from './home/home.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { SharedModule } from './shared.module';
import { CommonModule } from '@angular/common';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatButtonModule } from '@angular/material/button';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [
    CommonModule,
    BrowserModule,
    MatSidenavModule,
    MatToolbarModule,
    MatButtonModule,
    FormsModule,
    ReactiveFormsModule,
    AppRoutingModule,
    HttpClientModule,
    BrowserAnimationsModule,
  ],
  bootstrap: [AppComponent],

})
export class AppModule { }

和login.module.ts：

import { NgModule } from '@angular/core';
import { LoginComponent } from './login.component';
import { Routes, RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatButtonModule } from '@angular/material/button';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

const routes: Routes = [
  {
    path: '',
    component: LoginComponent
  }
];

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    BrowserModule,
    MatSidenavModule,
    MatToolbarModule,
    MatButtonModule,
    FormsModule,
    ReactiveFormsModule,
    RouterModule.forChild(routes)
  ]
})
export class LoginModule { }

这是我的login.component.html：

<form novalidate id="login_form" [formGroup]="form" (submit)="submit()">

  <div>
    <label>
      Username:
    </label>
    <input name="username" formControlName="username" />
  </div>

  <div>
    <label>
      Password:
    </label>
    <input name="password" formControlName="password" />
  </div>

  <button type="submit">Login</button>
</form>

和我的login.components.ts

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

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

  constructor() { }

  form: FormGroup;

  ngOnInit(): void {
    this.form = new FormGroup({
      username: new FormControl(''),
      password: new FormControl('')
    });

  }

  submit() {
    console.log(this.form.value);
    return false;
  }

}

这是我的错误：

: Compiled successfully.

    ERROR in src/app/login/login.component.html:1:34 - error NG8002: Can't bind to 'formGroup' since it isn't a known property of 'form'.

    1 <form novalidate id="login_form" [formGroup]="form" (submit)="submit()">
                                       ~~~~~~~~~~~~~~~~~~

      src/app/login/login.component.ts:6:16
        6   templateUrl: './login.component.html',
                         ~~~~~~~~~~~~~~~~~~~~~~~~
        Error occurs in the template of component LoginComponent.

这似乎是一个模块包含问题，但是所有Forms模块已经在应用程序和登录模块中声明了。使用共享模块，问题仍然存在。

Answer 1

您需要将ReactiveFormsModule导入到LoginModule中，而不是FormModule。

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

请参见FormGroupDirective文档：https://angular.io/api/forms/FormGroupDirective#ngmodule