Thymeleaf извлекает текст из ввода с похожим именем поля, добавляя его к другому, разделенному запятой

Question

Я прошу помощи, потому что тимелиф делает что-то странное: вот моя форма:

<form action="#" th:action="@{/add-new-board}" method="post">

    <p>Board name: <input type="text" th:name="board" th:field="${board.name}" /></p>
    <p th:if="${#fields.hasErrors('board.name')}" th:errors="${board.name}">Name Error</p>

    <p>Section #1 name: <input type="text" th:name="section" th:field="${section.name}" /></p>
    <p th:if="${#fields.hasErrors('section.name')}" th:errors="${section.name}">Name Error</p>

    <p><input type="submit" value="Submit" /> <input type="reset" value="Reset" /></p>
</form>

Вот мой контроллер:

@GetMapping(path = "/add-new-board")
public String addNewBoardForm(Model model) {
    model.addAttribute("board", new Board());
    model.addAttribute("section", new Section());
    return "fragments/forms/add-new-board";
}

@PostMapping(path = "/add-new-board")
public String addNewBoardSubmit(@Valid @ModelAttribute Board board,
                                @Valid @ModelAttribute Membership membership,
                                @Valid @ModelAttribute Section section,
                                @AuthenticationPrincipal UserDetailsImpl principal,
                                BindingResult result,
                                RedirectAttributes attributes) {
    if (result.hasErrors()) {
        attributes.addFlashAttribute("create_board_fail", "Check if you have all fields");
        return "fragments/forms/add-new-board";
    } else {
        board.setCreated_at(LocalDateTime.now());
        Slugify slug = new Slugify();
        board.setSlug(slug.parse(board.getName()));
        boardRepository.save(board);

        User user = userRepository.findByEmail(principal.getEmail()).get();
        membership.setMember_type(MemberType.MANAGER);
        membership.setBoardId(board);
        membership.setUserId(user);
        membershipRepository.save(membership);

        section.setBoard(board);
        section.setColor(ColorType.BLUE_BASIC);
        section.setOrdering(1);
        sectionRepository.save(section);

        attributes.addFlashAttribute("create_board_success", "You successfully added a new board!");
        return "redirect:/";
    }

Итак, моя цель - вставить текст из 1-го ввода в таблицу "board" в столбец "name", и вставьте текст из 2-го ввода в таблицу "section" в столбец "name". Так что названия этой колонки похожи. Теперь, когда я запускаю код, заполняю ввод и отправляю его, я попадаю в свою базу данных:

таблицы базы данных img

Где "AAA" - это то, что я написал в 1-й вход и "BBB" во 2-м

Answer 1

Это происходит потому, что вы используете th:field неправильно. th:field предназначен для использования с одним th:object, но сейчас вы используете 2 разных объекта board и section. Когда отображается HTML, оба входа, вероятно, имеют одинаковые значения name="name", и когда они передаются, значения объединяются вместе, и вы получаете поведение, которое вы видите.

Вместо этого следует добавить Board и Section к одному объекту, и используйте это как свою форму. Например, если вы создали объект BoardForm:

public class BoardForm {
  private Board board = new Board();
  private Section section = new Section();

  // Getters and setters...
}

добавил это к вашей модели вместо

model.addAttribute("form", new BoardForm());

, тогда ваш html будет выглядеть так

<form action="#" th:action="@{/add-new-board}" th:object="${form} method="post">
    <p>Board name: <input type="text" th:name="board" th:field="*{board.name}" /></p>
    <p>Section #1 name: <input type="text" th:name="section" th:field="*{section.name}" /></p>
    <p><input type="submit" value="Submit" /> <input type="reset" value="Reset" /></p>
</form>