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

纳纳尔

我正在开发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 <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.

阿拉什（Arash Hatami）

嗨，您应该在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 { }

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。