Deleting item of a FormArray that was used in a *ngFor throw an error

In the "learning angular no nonsense" book, there is an example of how to use FormArray that I try to improve. This example uses a dynamic form based on a cart containing products, I try to add the possibility to remove some products (by using removeAt method from the FormArray collection) that are in the cart but I get an error.

Cart.component.html, when a product is removed an error ("ERROR TypeError: ctx_r1.cart2[i_r4] is undefined") is triggered at {{ cart2.name }} and (click)="removeProduct(i)" lines :

<form [formGroup]="cartForm2" (ngSubmit)="validateCart()">
<div
formArrayName="products"
*ngFor="let product of cartForm2.controls.products.controls; let i = index"
>
<label>{{ cart2.name }} : </label>

<input type="number" [formControlName]="i" />
<button type="button" (click)="removeProduct(i)">Remove</button>
<span *ngIf="product.touched && product.hasError('required')">
The field is required</span
>
<span *ngIf="product.touched && product.hasError('min')">
The field can't be lower than 1</span
>
</div>
<p>cartForm.value : {{ cartForm2.value | json }}</p>
<div>

<button type="submit" [disabled]="!cartForm2.valid">Validate</button>
</div>
</form>


cart.component.ts, get the cart from the service and create a control for each product that is in the cart. The removeProduct method will delete the product in the Cart Service,update cart2 property with the last reference, remove the control by using the good index :

cartForm2 = new FormGroup({
products: new FormArray<FormControl<number>>([]),
});
cart2: Product[] = [];
ngOnInit(): void {
this.cart2 = this.cartService.cart;
this.cart2.forEach(() => {
this.cartForm2.controls.products.push(
new FormControl(1, {
nonNullable: true,
validators: [Validators.required, Validators.min(1)],
})
);
});
}
removeProduct(index: number) {
this.cartService.deleteProduct(index);
this.cart2 = this.cartService.cart
this.cartForm2.controls.products.removeAt(index);
console.log(JSON.stringify(this.cart2));
}


cart.service.ts, is used to store and share between components the products that have been bought :

cart: Product[] = [];

constructor() {}

addProduct(product: Product) {
this.cart.push(product);
}

deleteProduct(id: number) {
this.cart = this.cart.filter((p) => p.id === id);
}


After removing a product, I get ERROR TypeError: ctx_r1.cart2[i_r4] is undefined" :



Any idea ?

Continue reading...