如何在Thymeleaf中向对象的List集合属性推送、绑定值？

问题根源 #

• Job类缺少无参构造方法，Spring MVC无法通过反射自动实例化Job对象完成数据绑定
• Candidate类的jobs属性没有初始化，提交表单时找不到对应的集合容器存储数据
• 前端表单绑定集合属性的语法错误：绑定集合内对象属性需要指定下标，且th:object已指定${candidate}的情况下不需要再加candidate前缀

修正步骤 #

1. 修正模型类 #

首先修改Job类，新增无参构造方法：

public class Job {
    // 新增无参构造，供Spring反射实例化使用
    public Job() {
    }
    public Job(String name) {
        super();
        this.name = name;
    }

    private String name;

    public String getName() {
        return name;
    }

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

再修改Candidate类，初始化jobs列表避免绑定时空指针：

public class Candidate {
    private String candidatename;
    // 初始化List容器
    private List<Job> jobs = new ArrayList<>();
    
    public String getCandidatename() {
        return candidatename;
    }

    public void setCandidatename(String candidatename) {
        this.candidatename = candidatename;
    }

    public List<Job> getJobs() {
        return jobs;
    }

    public void setJobs(List<Job> jobs) {
        this.jobs = jobs;
    }
}

2. 修正后端Controller #

如果需要预置N个工作经历输入框，可以在GET接口中提前给candidate添加对应数量的空Job对象：

@GetMapping("/emp")
public String test(Model model) {
    Candidate candidate = new Candidate();
    // 示例：预置2个空Job，对应前端2个输入框
    candidate.getJobs().add(new Job());
    candidate.getJobs().add(new Job());
    model.addAttribute("candidate", candidate);
    return "candidatedetail";
}

@PostMapping("/savejobhistory")
public String sendForm(@ModelAttribute("candidate") Candidate candidate) {
    System.out.println("Inisde Meth");
    System.out.println(candidate.getCandidatename());
    // 打印验证绑定结果
    candidate.getJobs().forEach(job -> System.out.println("工作经历："+job.getName()));
    return "candidatejob";
}

3. 修正前端表单绑定语法 #

固定数量输入框的场景直接按下标绑定对应Job的name属性即可：

<form class="form-horizontal" th:action="@{/savejobhistory}" method="post" th:object="${candidate}">
    <label>候选人姓名:</label>
    <input type="text" th:field="*{candidatename}" /><br/>
    <!-- 第一个工作经历输入框 -->
    <label>工作经历1:</label>
    <input type="text" placeholder='公司名称' class="form-control" th:field="*{jobs[0].name}"/><br/>
    <!-- 第二个工作经历输入框 -->
    <label>工作经历2:</label>
    <input type="text" placeholder='公司名称' class="form-control" th:field="*{jobs[1].name}"/><br/>
    <button type="submit" class="btn btn-default">提交</button>
</form>

如果需要动态新增输入框，只需配合JS生成name属性符合jobs[下标].name格式的输入框即可，Spring MVC会自动完成绑定。

如果需要在结果页展示工作经历，修改candidatejob.html代码：

<h2>候选人详情</h2>
<span>备注:</span><span th:text="${candidate.candidatename}"></span><br/>
<div th:each="job : ${candidate.jobs}">
    <span>工作经历：</span><span th:text="${job.name}"></span><br/>
</div>

内容的提问来源于stack exchange，提问作者Parameshwar