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

Posted 2023-03-13

【中文标题】无法绑定到“formGroup”，因为它不是 Angular 中“form”的已知属性

【英文标题】：Can't bind to 'formGroup' since it isn't a known property of 'form' in Angular

【发布时间】：2021-04-08 16:16:55

【问题描述】：

我正在开发一个 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，在设置模块中我导入了共享模块。但我仍然收到以下错误消息：

错误 src/app/setup-module/pages/expense-head/expense-head.component.html:1:7

错误 NG8002：无法绑定到“formGroup”，因为它不是“form”的已知属性。

1

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

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.

【参考方案1】：

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

您放置的导出是@NgModule 装饰器的exports 属性。它使 Angular 模块能够将它的一些组件/指令/管道暴露给应用程序中的其他模块。没有它，模块中定义的组件/指令/管道只能在该模块中使用。

共享模块

@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  

【讨论】：

@mnu-nasir 我看到了，我说的是出口而不是进口。