Elements passed through a form not received by the server nor displayed on the front. PATCH method | Angular | Dropwizard

Question

Server side shows that the PATCH method is called and adds a null at the end of the array, instead of a new Item array with the Name and Price taken from user input.

Answer 1

I'll try to address a couple of points, even if I don't have a complete understanding of the problem.

Why are putting a + there? It will transform the variable in its numeric representation, is that what you want? The get() call return value is string | null

const id = +this.route.snapshot.paramMap.get('id');

---

Here you're calling menuService.patchAdd with this.item, but I suppose you want to create a new Item instance using the input values name and price.

// Angular
(click) = patchItAdd(itemName.value, itemPrice.value)

// Java
patchItAdd(name: string, price: number){
     ...
     this.menuService.patchAdd(id, this.item)

Are my assumptions correct?

---

Another issue I see is that you're passing the id, which should be string (or number in your case, since you transform it with the +) to patchAdd

const id = +this.route.snapshot.paramMap.get('id');
this.menuService.patchAdd(id, this.item)

The patchAdd function expect a MenuModel, which is a complex object.
How's that? Are you sure this is what you want?

---

Let patchItAdd accept the menu.id value

(click) = "patchItAdd(menu.id, itemName.value, itemPrice.value)"

Now update the method

// Now this method accept the MenuModel#id property
patchItAdd(menuId: number, name: string, price: number){
   if (!name) {
      return;
   }

   const trimmedName = name.trim();

   // Construct a new ItemClass instance.
   // You need to take care by yourself of the "person" property and the "quantity" property
   const newItem = new ItemClass("", trimmedName, 0, price)

   this.menuService.patchAdd(menuId, newItem).subscribe(item => {
      this.items.push(item);
   });
}

Update also the patchAdd method to accept the menu ID, instead of the complete MenuModel

// Now this method accepts the menu ID  
patchAdd(menuId: number, itemToAdd: ItemClass): Observable<any> { 
   const url = `${this.menusUrl}/add/${menuId}`
   return this.http.patch(url, itemToAdd, httpOptions)
}

On the back-end add a no-args constructor to Item

public Item() { }