首页 > 解决方案 > Thymeleaf 从具有相似字段名称的输入中检索文本,将其添加到另一个以逗号分隔的文本中

问题描述

我正在寻求帮助,因为百里香做了一些奇怪的事情:这是我的表格:

<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:/";
    }

所以,我的目标是将文本从第一个输入到“board”表插入到列“name”,并将第二个输入的文本插入到“section”表到列“name”。所以这个栏目标题是相似的。现在,当我运行代码、填写输入并提交时,我将进入我的数据库:

数据库表 img

其中“AAA”是我在第一个输入中写的,而“BBB”在第二个输入中

标签: javaspring-bootthymeleaf

解决方案


发生这种情况是因为您使用th:field不正确。 th:field旨在与单个对象一起使用,th:object但现在您正在使用 2 个不同的对象boardsection. 呈现 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>

推荐阅读