angular - 在组件文件中导入 FormsModule 和 ReactiveFormsModule

Question

我有一个响应式(Reactive)表单，我想将其放入 boom-covers 的生成组件中。我正在使用属性[formGroup]:

<form name="boomCovers" method="post" id="bomCovers" (ngSubmit)="submitForm()" [formGroup]="boomCoversForm">
...
</form>

我得到了老栗子:

Can't bind to 'formGroup' since it isn't a known property of 'form' 

我知道我需要:

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

但是因为它是一个组件而不是页面，所以我没有 boom-covers.module.ts 文件来进行导入，只有:

boom-covers.component.html
boom-covers.component.scss
boom-covers.component.spec.ts
boom-covers.component.ts

那么我该如何解决这个问题呢？

我尝试将其放入 app-module.ts 中，但似乎没有什么区别。我以前曾多次遇到过这个问题，但一直不知道如何解决这个问题。

app.module.ts

@NgModule({
  declarations: [AppComponent],
  imports: [ 
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
  ],
  providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    { provide: LocationStrategy, useClass: HashLocationStrategy },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

有人有可行的解决方案还是我只是在胡说八道？

基本上，如果我的组件没有 .module.ts，如何成功导入 FormsModule 和 ReactiveFormsModule随附文件？ (默认情况下不是这样)

任何帮助或指导将不胜感激，因为我已经记不清我为此投入了多少工作时间，却没有任何成果。

Answer 1

这里有两个选择。

1. 使用新的独立组件并将模块直接导入其中。
2. 最简单的方法是将繁荣覆盖组件添加到 app.module.ts 中的“声明”数组中。

例如:

@NgModule({
  declarations: [AppComponent, BoomCoversComponent],
  imports: [ 
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
  ],
  providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    { provide: LocationStrategy, useClass: HashLocationStrategy },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}