使用复选框将对象添加到列表 - Spring Boot 和 Thymeleaf答案

【问题标题】：Adding objects to a list using checkboxes - Springboot & Thymeleaf使用复选框将对象添加到列表 - Spring Boot 和 Thymeleaf
【发布时间】：2021-09-16 17:24:03
【问题描述】：

我有一个小应用程序，可以在其中显示表单中的成分列表，并且每种成分都有一个复选框。如果成分被选择然后提交，它会进入一个 IngredientListWrapper 并添加到一个 Formula 对象。这可行，只是它不仅返回选中的框，还返回空的框。

以下是问题的几张图片：

控制器映射：

 @GetMapping("/add-ingredients-to-formula")
    public String addIngredientsToFormula(Model model) {
        List<Ingredient> ingredients = ingredientService.getAllIngredients();
        IngredientListWrapper ingredientListWrapper = new IngredientListWrapper();
        model.addAttribute("list", ingredients);
        model.addAttribute("listWrapper",ingredientListWrapper);
        return "Add-Ingredients-To-Formula-Form";
    }

    //creates a new Formula spec and sets the ingredientList to the ingredientListWrapper attribute
    @PostMapping("/formula-details")
    public String addFormulaDetails(@ModelAttribute("ingredientListWrapper") IngredientListWrapper ingredientListWrapper, Model model) {
        Formula formula = new Formula();
        formula.setIngredients(ingredientListWrapper.getIngredientListWrapper());
        model.addAttribute("formula", formula);
        return "Add-Formula-Form";
    }

Thymeleaf 形式：将成分添加到公式形式

<div class="container table-responsive">
    <h1>Ingredient Selection Table</h1>
    <table class="table table-striped">
        <thead class="table-light">
        <tr>
            <th>Ingredient ID</th>
            <th>Ingredient Name</th>
            <th>Type</th>
            <th>Manufacturer</th>
            <th>Potency</th>
            <th>Action</th>
        </tr>
        </thead>
            <tbody>
            <form action="#" th:action="@{/formula-details}" method="post" th:object="${listWrapper}">
                <tr th:each="ingredient, stat : ${list}">
                    <td th:text="${ingredient.getIngredientId()}"></td>
                    <td th:text="${ingredient.getIngredientName()}"></td>
                    <td th:text="${ingredient.getType()}"></td>
                    <td th:text="${ingredient.getManufacturer()}"></td>
                    <td th:text="${ingredient.getPotency()}"></td>
                    <td>
                        <input type="checkbox" th:field="*{ingredientListWrapper[__${stat.index}__]}" th:value="${ingredient.ingredientId}">
                    </td>
                </tr>
                <button type="submit" class="btn btn-info col-2">Add</button>
            </form>
            </tbody>
    </table>
</div>

添加公式表格

 <div class="container table-responsive" >
        <div>
            <h2>Formula Creation Form</h2>
            <form action="#" th:action="@{/generate-formula}" method="post" th:object="${formula}">

                <input type="text" th:field="*{formulaId}">
                <input type="text" th:field="*{formulaName}">
                <input type="text" th:field="*{dosageForm}">
                <table class="table table-striped">
                    <thead class="table-light">
                    <tr>
                        <td>Ingredient ID</td>
                        <td>Ingredient Name</td>
                        <td>Type</td>
                        <td>Potency</td>
                        <td>Label Claim (mg)</td>
                        <td>Amount (mg)</td>
                        <td>Manufacturer</td>
                    </tr>
                    </thead>
                    <tbody>
                            <tr th:each="ingredient, holder : *{ingredients}">
                                <td><input th:field="*{ingredients[__${holder.index}__].ingredientId}"></td>
                                <td><input th:field="*{ingredients[__${holder.index}__].ingredientName}"></td>
                                <td><input th:field="*{ingredients[__${holder.index}__].type}"></td>
                                <td><input th:field="*{ingredients[__${holder.index}__].potency}"></td>
                                <td><input th:field="*{ingredients[__${holder.index}__].manufacturer}"></td>
                                <td><input th:field="*{ingredients[__${holder.index}__].labelClaim}"></td>
                            </tr>
                    </tbody>
                </table>
                <button type="submit" class="btn btn-info col-2">Save</button>
            </form>
        </div>
    </div>

我想确保只有选定的框被发送到 IngredientListWrapper 而不是空的。

【问题讨论】：

标签： spring-boot arraylist checkbox thymeleaf

【解决方案1】：

更新 1

在 Add-Ingredients-To-Formula-Form 中发现问题

这个区块：

<td>
                        <input type="checkbox" th:field="*{ingredientListWrapper[__${stat.index}__]}" th:value="${ingredient.ingredientId}">
                    </td>

改成这样了：

<td>
                        <input type="checkbox" th:field="${ingredientListWrapper.ingredientListWrapper}" th:value="${ingredient.ingredientId}">
                    </td>

现在我只得到选定的对象！

【讨论】：