When attempting to delete a row from a table, an error occurred stating "TypeError: Cannot read property 'value' of undefined" after placing the delete button at the end of a row. I watched this video tutorial for guidance on deleting a row without loading its data into a form.
//service.ts
deleteProduct(key: string) {
this.productList.remove(key);
}
//component.ts
onDelete(form: NgForm) {
//deleteProduct() function
if (confirm('Are you sure you want to delete this record?') == true) {
this.ProductService.deleteProduct(form.value.$prdKey);
//this.resetForm(form);
}
}
onItemClick(prd: Product) {
this.ProductService.selectedProduct = Object.assign({}, prd);
}<!--the form-->
<form #productForm="ngForm" (ngSubmit)="onSubmit(productForm)">...</form>
<tr *ngFor="let product of productList">
<td>{{product.prdName}}</td>
<td><button type="button" class="btn btn-warning" (click)="onItemClick(product)" title="click to edit or delete" data-toggle="modal" data-target="#myModal">Update</button></td>
<td><button type="button" class="btn btn-danger" *ngIf="ProductService.selectedProduct.$prdKey == null" (click)="onDelete(ProductService.selectedProduct.$prdKey)">Delete</button></td>
</tr>I tweaked the code suggested in the video tutorial by changing
*ngIf="ProductService.selectedProduct.$prdKey == null"*ngIf="ProductService.selectedProduct.$prdKey != null"