无法绑定到 'formGroup'，因为它不是 Angular 中 'form' 的已知 属性

Question

我正在开发一个 Angular 10 应用程序。我有几个模块。有一个共享模块，我在那里导入了“FormsModule”和“ReactiveFormsModule”。现在在我的设置模块中我有一个组件。我正在尝试在这里开发一种反应形式。组件名称是 ExpenseHeadComponent。代码如下：

HTML 形式:

<form [formGroup]="frmExpenseHead">
  <div class="form-group row">
    <label for="Code" class="col-sm-12 col-form-label">Code</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="code" name="code" formControlName="code">
    </div>    
  </div>
</form>

TS文件为：

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
    
@Component({
  selector: 'app-expense-head',
  templateUrl: './expense-head.component.html',
  styleUrls: ['./expense-head.component.css']
})
export class ExpenseHeadComponent implements OnInit {
  frmExpenseHead: FormGroup;
  
  constructor() { }

  ngOnInit() {
    this.frmExpenseHead = new FormGroup({
      code: new FormControl("", Validators.required),          
    });
  }
}

设置模块

@NgModule({
  imports: [
    RouterModule.forChild(setupRoutes),
    CommonModule,
    SharedModuleModule,    
  ],
  declarations: [
    CompanyComponent,
    IncomeHeadListComponent,
    ExpenseHeadListComponent,
    ExpenseHeadComponent,
    IncomeHeadComponent,
    MemberListComponent,
    SetupModuleComponent
  ]
})
export class SetupModuleModule { }

共享模块

@NgModule({
  imports: [
    RouterModule.forChild(sharedRoutes),
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    NgbModule,
  ],
  exports: [
    HeaderComponent,
    NavigationComponent,
    NOFoundComponentComponent,
    NavigateBackComponent,
    ErrorPageComponent,
  ],
  declarations: [
    HeaderComponent,
    NavigationComponent,
    NOFoundComponentComponent,
    NavigateBackComponent,
    ErrorPageComponent,
    SharedModuleComponent
  ]
})
export class SharedModuleModule { }

这里显示，在共享模块中我导入了FormsModule、ReactiveFormsModule，在设置模块中我导入了共享模块.但我仍然收到以下错误消息：

ERROR in src/app/setup-module/pages/expense-head/expense-head.component.html:1:7

• error NG8002: Can't bind to 'formGroup' since it isn't a known property of 'form'.

  1 <form [formGroup]="frmExpenseHead"> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/setup-module/pages/expense-head/expense-head.component.ts:7:16
    7   templateUrl: './expense-head.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component ExpenseHeadComponent.
  

Answer 1

您好，您应该在 SharedModuleModule 中导出 ReactiveFormsModule 和 FormsModule。

一个导出你放的是@NgModule 装饰器的导出属性。它使 Angular 模块能够将其某些 components/directives/pipes 公开给应用程序中的其他模块。没有它，模块中定义的 components/directives/pipes 只能在该模块中使用。

共享模块

@NgModule({
  imports: [
    RouterModule.forChild(sharedRoutes),
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    NgbModule,
  ],
  exports: [
    FormsModule, //forgotten to export
    ReactiveFormsModule, //forgotten to export
    HeaderComponent,
    NavigationComponent,
    NOFoundComponentComponent,
    NavigateBackComponent,
    ErrorPageComponent,
  ],
  declarations: [
    HeaderComponent,
    NavigationComponent,
    NOFoundComponentComponent,
    NavigateBackComponent,
    ErrorPageComponent,
    SharedModuleComponent
  ]
})
export class SharedModuleModule { }