Object list from thymeleaf to spring boot

Question

I'm trying to pass the list of product id from thymeleaf by using multiple dropdown menu. It outputs the size but the product object is null. If I create List<String> product; in Expense class and replace expenseDetail in addExpense.html with product ; It works. I'm trying to pass product via ExpenseDetail class

Expense class

@Entity
public class Expense {
    //fields

    @OneToMany(mappedBy = "expense", cascade = CascadeType.ALL)
    @NotNull
    private List<ExpenseDetail> expenseDetail;
    //getters and setters
}

ExpenseDetail class

public class ExpenseDetail {
    //fields

    @ManyToOne
    @JoinColumn(name = "expense_id")
    private Expense expense;

    @ManyToOne
    @JoinColumn(name = "product_id")
    private Product product;

    //getters and setters   

}

addExpense.html

<form th:action="@{/expense/new}" th:method="post" th:object="${expense}">
    <select id="product" th:field="*{expenseDetail[0]}">
        <option value="" th:text="#{item.select.prompt}"></option>
        <option th:each="product: ${products}" th:value="${product.id}" th:text="${product.name}"></option>
    </select>
    <select id="product" th:field="*{expenseDetail[1]}" >
        <option value="" th:text="#{item.select.prompt}"></option>
        <option th:each="product: ${products}" th:value="${product.id}" th:text="${product.name}"></option>
    </select>
    <button type="submit" name="Save expense">Save Expense</button>

</form><!-- ends expense form -->

ExpenseController

@Controller
public class ExpenseController {
    @PostMapping("/expense/new")
    public String addExpense(@Valid Expense expense, BindingResult result, Model model){
        //This prints the list of size 2
        System.out.println(expense.getExpenseDetail().size());

        List<ExpenseDetail> el=expense.getExpenseDetail();
        el.forEach(e->{
            System.out.println(e.getProduct()); //this is null
        });
        return "addExpense";
    }
}

Answer 1

The field on the select should be where you want the value of the selected option (product ID) to go, so you should use th:field="*{expenseDetail[0].product.id}" .

This will then give you a Product containing the selected ID within your ExpenseDetail objects. If nothing is chosen in the select then you will end up with a null ID in the Product , you'll need to handle these on the server side or use JavaScript to exclude the field if it's null.

Bear in mind Thymeleaf doesn't know anything about your Product object or where they come from. It will only populate the fields that appear in the form, so other things like name will be null in the POST handler. Typically you'd just take the ID and use it to reload the object from your DB or whatever.