jeudi 16 septembre 2021

Adding objects to a list using checkboxes - Springboot & Thymeleaf

I have a small app where I display a list of ingredients within a form, and each ingredient has a checkbox. If the ingredient is selected and then submitted, it goes into an IngredientListWrapper and added to a Formula object. This works..except that instead of only returning the checked boxes, it returns the empty ones as well.

Below are a couple pics of the problem: Pic 2

enter image description here

Controller Mappings:

 @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 Form: Add-Ingredients-To-Formula-Form

<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>

Add-Formula-Form

 <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>

I'd like to ensure that only the selected boxes are sent over to the IngredientListWrapper and not the empty ones.




Aucun commentaire:

Enregistrer un commentaire