在 thymeleaf 中设置 th:field 属性正在替换 name 属性答案

【问题标题】：Setting up th:field attribute in thymeleaf is replacing name attribute在 thymeleaf 中设置 th:field 属性正在替换 name 属性
【发布时间】：2020-09-27 02:37:06
【问题描述】：

我有一个表格，我需要在其中显示许多问题和多个答案。我正在使用带有 Thymeleaf 的 spring boot 并循环显示一个列表，该列表显示问题的标签和多个选择的单选按钮。当我设置：字段属性来捕获用户输入时，它会替换所有单选按钮的名称属性。在这种情况下，我只能为所有问题选择一个单选按钮。我复制了它看起来像 thymeleaf 库中的错误。有人可以建议面对同样的事情吗？

我创建了一个示例应用程序。 Repo 是在 github 上创建的。

https://github.com/ashokruhela/thymeleaf-radio.git

html

<!DOCTYPE html>
<html lang="en" xmlns:th="http:www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Contest</title>
</head>
<body>
    <h1>contest questions</h1>
    <form action="@{/result}" th:object="${contest}">
        <div th:each="ques,qs: ${contest.questions}">
            <label th:text="${ques.title}"></label>
            <div th:each="option,os:${ques.options}">
                <input type="radio"
                       th:field="*{ques.answer}"
                       th:name="${'question'+qs.count}"
                       th:id="${'Q'+qs.count+'opt'+os.count}"
                       th:value="${option.descpription}" />
            </div>

        </div>
    </form>
</body>
</html>

比赛

package com.ak.learning.hibernatemapping;
import java.util.List;

public class Contest {
    String name;
    List<ContestQuestion> questions;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public List<ContestQuestion> getQuestions() {
        return questions;
    }

    public void setQuestions(List<ContestQuestion> questions) {
        this.questions = questions;
    }
}

问题

package com.ak.learning.hibernatemapping;
import java.util.List;

public class ContestQuestion {
    String title;
    String answer;

    List<QuestionOption> options;

    public String getAnswer() {
        return answer;
    }

    public void setAnswer(String answer) {
        this.answer = answer;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public List<QuestionOption> getOptions() {
        return options;
    }

    public void setOptions(List<QuestionOption> options) {
        this.options = options;
    }
}

选项

package com.ak.learning.hibernatemapping;

public class QuestionOption {
    String description;

    public String getDescription() {
        return description;
    }

    public void setDescription(String description) {
        this.description = description;
    }
}

控制器

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class ContestController {
    @GetMapping("/contest")
    public String contest(Model model){

        Contest contest = new Contest();
        //adding the questions is ommitted.....
        model.addAttribute("contest", contest);
        return "contest";
    }
}

【问题讨论】：

你读过stackoverflow.com/questions/53244936/…吗？

标签： spring-boot radio-button thymeleaf

【解决方案1】：

我不知道你是否还需要它，但我为这个确切的问题苦苦挣扎了两天，所以我将发布我发现的内容，因为它可以帮助其他人。

首先，th:field 覆盖 name 和 id 值。因此，要将每组问题放在单独的单选属性名称中，您需要两次迭代：一次用于问题，一次用于每个选项。这里最大的问题是如何将选择的选项绑定到 th:field。

您需要知道该字段将以字符串格式接收选择的“值”属性，所以我在这里所做的就是在我的问题模型中添加一个“字符串选择选项”属性。最后，就我而言，我有一个这样的html：

<fieldset th:each="question, count: ${questions.questions}">
                
                <label th:text="${question.text}"></label>
                
                <ul >
                    <li th:each="option : ${question.options}">
                        
                        <input th:value="${option.title}" th:field="*{questionObject[__${count.index}__].optionChosen}" type="radio"/>
                        <label th:text="${option.text}"></label> 
                    </li>
                </ul>
                
            </fieldset>

在这里考虑两件事很重要：迭代 questionObject 选项列表的计数器，以便 Spring 可以正确地将答案绑定到列表中。我为 Question 和 Option 模型创建了一个 title 属性，以便更容易放入输入属性中

PS：我将代码翻译成英文，所以可能有些元素的名称可能有误，但重要的是如何进行迭代和绑定。

【讨论】：