Add items dynamically to a list using Thymeleaf

Question

In my application, I have a form to add an object to the database. In this object I have a list of other objects. For example, it is as if the object I am registering is a Sale and the list is Itemdevenda. How to add multiple items of sale to sale?

Answer 1

Looking at Hymeleaf’s documentation can do this.I will give the example of my project,

This my Entity, I will create dynamic fields of the current listTurno.

if all your Repospository, service and configuration, do routes,... have finished I will only include this in the controller.~

In your request Mapping for the form you need arrow to list because if not it will load would do and only implement when you click the button to add a list .

    @PreAuthorize("hasAuthority('PERM_CURSO_CADASTRAR')")
    @RequestMapping("/novo")
    public ModelAndView cadastrarCurso() { // crio e seto a lista quando redireciono para o formulário
    ModelAndView mv = new ModelAndView();
    mv.setViewName("/curso/formulario");

    Curso curso = new Curso();
    CursoTurno cursoTurnos = new CursoTurno();
    cursoTurnos.setCurso(curso);
    curso.getCursoTurnos().add(cursoTurnos);
    mv.addObject("curso", curso);

    return mv;
    }

Still in my controller I will create this method for when I click the button in my case the parameter value and "addRow" it implement the fields, NOTHING OF JAVA SCRIPT. Thymeleaf and very good recommend reading all documentation + springMVC

/*************************** * Dynamic Methods ***************************/

@RequestMapping(value = "/novo", params = {"addRow"}, method = RequestMethod.POST)
public String addRow(final Curso curso, @RequestParam("addRow") String addRow, final BindingResult bindingResult) {

    CursoTurno cursoTurno = new CursoTurno(); // crio minha list
    cursoTurno.setCurso(curso); // set ela
    curso.getCursoTurnos().add(cursoTurno);
    return "/curso/formulario"; // retorno com a nova list
}

@RequestMapping(value = "/novo", params = {"removeRow"}, method = RequestMethod.POST)
public String removeRow(
        final Curso curso, final BindingResult bindingResult,
        final HttpServletRequest req) {
    final Integer rowId = Integer.valueOf(req.getParameter("removeRow"));
    curso.getCursoTurnos().remove(rowId.intValue());
    return "/curso/formulario";
}

In the view we will create a ROW , in the Thymeleaf rowStat.index and count started with 0. EVERYTHING THAT RELATES TO THE LIST VALUE needs to be '[${rowStat.index}].' between the object and its attribute, Much in this part and part of my particular validation, character limit in the field with JS and msg error.

  <!-- INICIO - Curso Turno -->
                        <div class="form-group"   th:each="cursoTurnos, rowStat : *{cursoTurnos}" th:if="${rowStat.index} &lt; 3">
                            <div class="col-sm-5"  >
                                <div class="form-group"
                                     th:class="${#fields.hasErrors('cursoTurnos[__${rowStat.index}__].quantidadeVagas')} ? has-error">
                                    <label class="control-label required"
                                           th:text="|#{mensagem.quantidadeDeVagas}|" >Quantidade de Vagas</label>
                                    <input type="text"  class="form-control input-sm" th:id="quantVagas_ + ${rowStat.index}"
                                           th:field="*{cursoTurnos[__${rowStat.index}__].quantidadeVagas}"  onkeydown="limita(this);" ng-model="numero.valor"  onkeyup="somenteNumeros(this);"  min="0" />
                                    <label class="error"
                                           th:if="${#fields.hasErrors('cursoTurnos[__${rowStat.index}__].quantidadeVagas')}? fieldError"
                                           th:errors="*{cursoTurnos[__${rowStat.index}__].quantidadeVagas}"></label>
                                </div>
                            </div>
                            <div class="col-sm-5" >
                                <div class="form-group" th:classappend="${#fields.hasErrors('cursoTurnos[__${rowStat.index}__].turno')} ? has-error">
                                    <label class="control-label required" for="turno" th:text="#{mensagem.turno}">Turno</label>
                                    <select class="form-control " id="turno" th:field="*{cursoTurnos[__${rowStat.index}__].turno}" data-plugin-selectTwo="">
                                        <option selected="selected" value="" th:text="#{mensagem.selecione}"></option>
                                        <option th:each="turno: ${getAllTurnos}" th:value="${turno.id}" th:text="#{'mensagem.'+ ${turno.nome}}" id="turno"></option>
                                    </select>
                                    <label class="error" th:if="${#fields.hasErrors('cursoTurnos[__${rowStat.index}__].turno')}? fieldError" th:errors="*{cursoTurnos[__${rowStat.index}__].turno}">
                                    </label>
                                </div>
                            </div>
                            <div class="col-sm-1">
                                <button class="btn btn-danger padding-buttons" type="submit" name="removeRow" th:value="${rowStat.index}"
                                        th:if="${rowStat.index} ge 0 and ${#lists.size(curso.cursoTurnos) ne 1}" > // LOGICA PARA O BOTÃO DE REMOÇÃO SO APAREÇA QUANDO AH 2 LIST E EU POSSO EXCLUIR O PRIMEIRO VALOR, DESENVOLVIDA PELO MEU AMIGO (CAIRO,ENG. COMPUTAÇÃO,UNIEVANGÉLICA-GO,2017).
                                    <i class="fa fa-minus" style="color: white;"></i>
                                </button>
                            </div>
                        </div>

OFF THE ROW AND MY BUTTON TO ADD it to when ah 3 list, "& lt ;" in Thymeleaf means <, here tbm who was passing my parameter to the controller of "addRow".

               <div class="form-group " th:if="${#lists.size(curso.cursoTurnos)} &lt; 3">
                            <div class="col-sm-2">
                                <button class="modal-basic btn btn-primary"  type="submit" name="addRow" th:text="|#{mensagem.adicionar}  #{mensagem.turno}|">Add row</button>
                            </div>
                        </div>
                        <div class="form-group  " th:if="${#lists.size(curso.cursoTurnos)} >= 3">
                            <div class="col-sm-2">
                                <button class="modal-basic btn btn-primary" type="button" th:text="|#{mensagem.adicionar}  #{mensagem.turno}|" disabled="disabled">Add row</button>
                            </div>
                        </div>

THAT WAS MY RESULT

WELL I TRIED TO PASS THE MAXIMUM ANY DOUBT AND JUST LOOK HERE http://www.thymeleaf.org/doc/tutorials/3.0/thymeleafspring.html#Dynamic-Fields recommend reading all documentation