I got an issue No directive found with exportAs 'ngForm' on my first project angular 11. I'm already import FormsModule and ReactiveFormsModule in app.module.ts but I still get this error. Here's my code:
This my product.component.html code :
<form #tambahBuku='ngForm' (ngSubmit)="onSubmit(addBook.value)">
<div class="form-group">
<label for="">Title Book :</label>
<input type="text" class="form-control col-5" name=title placeholder="Title Book">
</div>
<div class="form-group">
<label for="">Author :</label>
<input type="text" class="form-control col-5" name=author placeholder="Book Author">
</div>
<div class="form-group">
<label for="">Price :</label>
<input type="text" class="form-control col-5" name=price placeholder="Book Price">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
this my product.component.ts code
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-product',
templateUrl: './product.component.html',
styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {
ngOnInit(): void {
}
onSubmit(data){
alert ("book "+data.title+'submited')
}
}
and this my app.module.ts code
import { BrowserModule } from '@angular/platform-browser';
...
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
// Material design
import { MaterialDesign } from './material/material.module';
@NgModule({
declarations: [
AppComponent,
LoginComponent,
RegisterComponent,
],
imports: [
BrowserModule,
...
FormsModule,
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
If the ProductComponent is declared in a different FeatureModule and not directly in AppModule then this module will also need to import FormsModule.