I encountered an issue with my first Angular 11 project: No directive found with exportAs 'ngForm'. Despite importing FormsModule and ReactiveFormsModule in app.module.ts, the error persists. Here is the code snippet:
This is from product.component.html :
<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 is from product.component.ts :
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 finally, this is from app.module.ts :
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 { }