Angular, TypeError: Cannot read property 'value' of undefined

Question

i'm trying to delete a row from a table. But i got an error that said TypeError: Cannot read property 'value' of undefined when i put the delete button at the end of a row. I followed this video link , but i just need to make the delete button functional without load row data to the form.

//service.ts
deleteProduct(key: string) {
  this.productList.remove(key);
}

//component.ts
onDelete(form: NgForm) {
  //fungsi deleteProduct()
  if (confirm('Are you sure 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>

The video tutorial version actually is *ngIf="ProductService.selectedProduct.$prdKey != null". I made the *ngIf="ProductService.selectedProduct.$prdKey == null" so the delete button will appear at the end of the row without clicking a row first. Can anyone help me solve this? Please let me know if more snippets are needed. Thank you in advance.

Saurabh Agrawal · Accepted Answer · 2017-11-20 05:03:21Z

1

This is because onDelete() you are passing a key of string type but in onDelete() definition you are expecting it as NgForm type.

Chnage onDelete(form: NgForm) { to onDelete(key: string) {

Try this

onDelete(key: string) {
  //fungsi deleteProduct()
  if (confirm('Are you sure to delete this record ?') == true) {
    this.ProductService.deleteProduct(key);
    //this.resetForm(form);
  }
}

answered Nov 20, 2017 at 5:03

Saurabh Agrawal

7,7553 gold badges31 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ramesh Rajendran · Accepted Answer · 2017-11-20 05:08:02Z

1

try this

//component.ts
onDelete(key: string) {
  //fungsi deleteProduct()
  if (confirm('Are you sure to delete this record ?') == true) {
    this.ProductService.deleteProduct(key);
  this.productList.remove(key);
    //this.resetForm(form);
  }
}

answered Nov 20, 2017 at 5:08

Ramesh Rajendran

38.9k49 gold badges159 silver badges241 bronze badges

Comments

Vivek Doshi · Accepted Answer · 2017-11-20 05:16:58Z

1

There are lost of issues :

<button type="button" class="btn btn-danger" 
        *ngIf="ProductService.selectedProduct.$prdKey == null" 
        (click)="onDelete(ProductService.selectedProduct.$prdKey)">
            Delete
</button>

ProductService.selectedProduct.$prdKey == null means shows delete when $prdKey is null , so onDelete(ProductService.selectedProduct.$prdKey) this will always pass null to onDelete
onDelete(form: NgForm) , you has set param as NgForm , but you are getting null as explained above
form.value.$prdKey this line will throw error TypeError: Cannot read property 'value' of undefined

You should use : *ngIf="ProductService.selectedProduct.$prdKey != null" as it is a perfect logic , and remove all the products with $prdKey null.

edited Nov 20, 2017 at 5:16

answered Nov 20, 2017 at 5:07

Vivek Doshi

58.8k12 gold badges120 silver badges126 bronze badges

Collectives™ on Stack Overflow

Angular, TypeError: Cannot read property 'value' of undefined

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related