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