I am interested in creating an Angular form, but I have a question about why we import 'ReactiveFormsModule' in app.module. Additionally, I am curious as to why we need to explicitly import classes like FormControl and FormGroup again in the template class.
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveComponent } from './reactive/reactive.component'; <-- component class
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent,
ReactiveComponent
],
imports: [
ReactiveFormsModule,
.....
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Reactive.Component.ts
import { Component, OnInit } from '@angular/core';
**import { FormControl } from '@angular/forms';** <---why is this needed as we have already imported forms module in app.module.ts
@Component({
selector: 'app-reactive',
templateUrl: './reactive.component.html',
styleUrls: ['./reactive.component.css']
})
export class ReactiveComponent {
name = new FormControl('');
constructor() { }
ngOnInit(): void {
}
}
What exactly does importing FormsModule in app.module.ts achieve? And what is the significance of importing each class separately in the component class?