Attempting to make a delete button in Thymeleaf / Spring MVC

Attempting to make a button for much longer than one would assume it takes for a newbie.

The Error message I'm getting is:

'java.lang.String' to required type 'java.lang.Long'; nested exception is java.lang.NumberFormatException: For input string: "${id}"

What am I doing wrong? Thanks in advance.

My Controller:

@Controller
public class BuyerController {

    private BuyerService buyerService;

    @Autowired
    public void setBuyerService(BuyerService buyerService){
        this.buyerService = buyerService;
    }

    @RequestMapping("/add-buyer")
    public String showBuyerPager(Model model){
        List<Buyer> buyers = buyerService.findAllBuyers();
        model.addAttribute("buyers", buyers);
        model.addAttribute("buyer", new Buyer());
        return "add-buyer";
    }

    @GetMapping("/showBuyerForm")
    public String addBuyerForm(Model model){
        model.addAttribute("buyer", new Buyer());
        model.addAttribute("buyerId", new Buyer().getBuyerId());
        return "add-buyer";
    }

    @PostMapping("/addBuyer")
    public String postBuyerForm(@ModelAttribute("buyer") Buyer buyer, Model model){
        buyerService.saveBuyer(buyer);
        model.addAttribute("buyer", new Buyer());
        return "redirect:/";
    }


    @PostMapping("/deleteBuyer/{id}")
    public String deleteBuyer(@PathVariable Long id){
        buyerService.deleteBuyer(id);
        return "redirect:/";
    }
}

View:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Title</title>
    <link href="styles.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<header> Welcome to Toner Stock </header>
<h1>Add Buyer</h1>
<div id="mynav" align="center">
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="add-buyer">Add Buyer</a></li>
        <li><a href="add-manager">Add Manager</a></li>
        <li><a href="current-stock">Current Stock</a></li>
        <li><a href="transactions">Transactions</a></li>
        <li><a href="orders">Order Form</a></li>
    </ul>
</div>

    <div id="display-table" align="center">
       <form th:action="@{/addBuyer}" th:object="${buyer}" style="width:100%" method="post">
           <table>
               <td><label>First Name: </label></td>
               <td><input type="text" th:field="*{firstName}"/></td>
               <td><label>Last Name: </label></td>
               <td><input type="text" th:field="*{lastName}"/></td>
               <td><label>Enter Address: </label></td>
               <td><input type="text" th:field="*{buyerAddress}"/></td>
               <td><input type="submit" value="save"/></td>
           </table>
       </form>
    </div>
<div>
    <div>
        <table id="info-table" align="center" border="1">
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Address</th>
            </tr>
            <tr th:each="buyer : ${buyers}">
                <td th:text="${buyer.firstName}"></td>
                <td th:text="${buyer.lastName}"></td>
                <td th:text="${buyer.buyerAddress}"></td>
                <td>
                    <form th:action="@{/deleteBuyer/${id}}" th:object="${buyer}" method="post">
                        <input type="hidden" th:field="${buyer}">Delete</input>
                        <button type="submit" onClick="return confirm('sure?')"/>
                    </form>
                </td>
            </tr>
        </table>
    </div>
</div>
    <div>
        <select>
            <option th:each="buyer : ${buyers}"
                    th:text="${buyer.firstName}"
                    th:value="${buyer.buyerId}"
            ></option>
        </select>
    </div>
<div>
    <div>
    </div>
</div>

</body>
</html>

Solution

I'm not a thymeleaf expert but it looks like your form th:action="@{/deleteBuyer/${id}}" should be th:action="@{/deleteBuyer/{id}(id=${buyer.buyerId})}"