Dynamiczne pola Thymeleaf brak reakcji na dodanie kolejnego inputa. SPRING JAVA

Question

Witam potrzebne mi są dynamiczne pola do tego zadania używam Thymeleaf.

Oto mój kod

 

    @RequestMapping(value = "/add_equipment", params = {"save"}, method = RequestMethod.POST)
    public String saveEquipments(@Valid EquipmentForm equipmentForm, BindingResult bindingResult) {

        if (bindingResult.hasErrors()) {
            return "redirect:/";
        }

        System.out.println(equipmentForm.getEquipments());
        return "redirect:/system/add_equipment";
    }

    @RequestMapping(value = "/add_equipment", params = {"addEquipment"})
    public String addRow(EquipmentForm equipmentForm) {
        equipmentForm.getEquipments().add(null);
        return "logistics/my_logistic/add_equipment";
    }

    @RequestMapping(value = "/add_equipment", params = {"removeEquipment"})
    public String removeEquipment(EquipmentForm equipmentForm, HttpServletRequest req) {

        Integer rowId = Integer.valueOf(req.getParameter("removeEquipment"));
        equipmentForm.getEquipments().remove(rowId.intValue());
        return "logistics/my_logistic/add_equipment";
    }

@Component
public class EquipmentForm {

    private List<String> equipments = new ArrayList<>();

    public List<String> getEquipments() {
        return equipments;
    }

    public void setEquipments(List<String> equipments) {
        this.equipments = equipments;
    }

    @Override
    public String toString() {
        return "EquipmentForm{" +
                "equipments=" + equipments +
                '}';
    }
}

html

 

        <form action="#" method="post" th:action="@{/system/add_equipment}">

            <fieldset class="row">
                <legend>What do you like?</legend>
                <button class="btn teal" type="submit" name="addEquipment">Add equipment
                    <i class="mdi-content-add left"></i>
                </button>

                <div class="row" th:each="row,rowStat : *{equipments}">
                    <div class="col s6">
                        <input type="text" th:field="*{equipments[__${rowStat.index}__]}"/>
                    </div>

                    <div class="col s6">
                        <button class="btn red" type="submit" name="removeTaste" th:value="${rowStat.index}">Remove
                            <i class="mdi-action-delete right waves-effect"></i>
                        </button>
                    </div>
                </div>
            </fieldset>


            <div class="row" style="margin-top: 40px">
                <button class="btn indigo waves-effect waves-light" type="submit" name="save">Submit
                    <i class="mdi-content-send right"></i>
                </button>
            </div>
        </form>

 

Na ekranie nie ma żadnego inputa są tylko dwa przyciski by dodać nowy oraz wyslać formularz.

Po naciśnięciu przycisku, który powinien dodać kolejny input nic się nie dzieje. ps widziałem dokumentacje thymeleaf na ten temat. Pozdrawiam.

Answer 1

Thymeleaf służy do renderowania odpowiedzi HTML a nie dynamicznych zmian po stronie klienta. Gdy odpowiedź zostanie wysłana do użytkownika imputy powinieneś dodawać z wykorzystaniem JS.