I am facing an issue with integrating a reactive form into a generated component called boom-covers. I am utilizing the [formGroup] property as shown below:
<form name="boomCovers" method="post" id="bomCovers" (ngSubmit)="submitForm()" [formGroup]="boomCoversForm">
...
</form>
However, I keep encountering the error message:
Can't bind to 'formGroup' since it isn't a known property of 'form'
To resolve this, I understand that I need to:
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
The challenge lies in the fact that my component does not have a boom-covers.module.ts file to perform these imports. It only consists of:
boom-covers.component.html
boom-covers.component.scss
boom-covers.component.spec.ts
boom-covers.component.ts
So, how can I overcome this obstacle?
I attempted to include the imports in app-module.ts, but it did not make a difference. This is a recurring issue for me, and I am unable to figure out a solution.
app.module.ts
@NgModule({
declarations: [AppComponent],
imports: [
FormsModule,
ReactiveFormsModule,
HttpClientModule,
],
providers: [
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
{ provide: LocationStrategy, useClass: HashLocationStrategy },
],
bootstrap: [AppComponent],
})
export class AppModule {}
Does anyone have a viable solution or am I missing something obvious?
In essence, how can I successfully import the FormsModule and ReactiveFormsModule without a corresponding .module.ts file for my component? Any assistance or direction would be highly appreciated as I've invested numerous hours into resolving this issue with no success.