binding form using formGroup in angular component - angular-formbuilder

Question

I'm facing below error while binding the form
cart.component.html
<h3>Cart</h3>
<p>
<a routerLink="/shipping">Shipping Prices</a>
</p>
<div class="cart-item" *ngFor="let item of items">
<span>{{ item.name }} </span>
<span>{{ item.price | currency }}</span>
</div>
<form [formGroup]="checkoutForm" (ngSubmit)="onSubmit()">
<div>
<label for="name">
Name
</label>
<input id="name" type="text" formControlName="name">
</div>
<div>
<label for="address">
Address
</label>
<input id="address" type="text" formControlName="address">
</div>
<button class="button" type="submit">Purchase</button>
</form>
cart.component.ts
import { Component } from '#angular/core';
import { FormBuilder } from '#angular/forms';
import { CartService } from '../cart.service';
#Component({
selector: 'app-cart',
templateUrl: './cart.component.html',
styleUrls: ['./cart.component.css']
})
export class CartComponent {
items = this.cartService.getItems();
checkoutForm = this.formBuilder.group({
name: '',
address: ''
});
constructor(
private cartService: CartService,
private formBuilder: FormBuilder,
) {}
onSubmit(): void {
// Process checkout data here
this.items = this.cartService.clearCart();
console.warn('Your order has been submitted', this.checkoutForm.value);
this.checkoutForm.reset();
}
}
error :
Failed to compile.
src/app/cart/cart.component.html:12:7 - error NG8002: Can't bind to 'formGroup' since it isn't a known property of 'form'.
12 <form [formGroup]="checkoutForm" (ngSubmit)="onSubmit()">
~~~~~~~~~~~~~~~~~~~~~~~~~~
src/app/cart/cart.component.ts:8:16
8 templateUrl: './cart.component.html',
~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component CartComponent.

Answer 1

just add into your app.module.ts
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
and under #NgModule
#NgModule({
imports: [
FormsModule,
ReactiveFormsModule,