使用Thymeleaf实现对应ArrayList<User>的多属性文本输入框技术问询

问题分析 #

现有代码存在以下核心问题：

1. Controller仅初始化了ArrayList容量，但未添加4个User实例，导致Thymeleaf循环无法生成输入框；
2. 表单输入框仅用th:value做回显，未配置正确的参数绑定规则，提交时无法将值存入对应User对象；
3. 服务提供商输入框存在笔误，错误绑定了user.email属性；
4. 表单结构缺少用户索引标识，用户无法区分输入框对应的User对象。

完整解决方案 #

1. 修复Controller层

向集合中添加4个空User实例，并实现POST接口接收提交数据：

@GetMapping("/")
public String formMethod(Model model) {
    ArrayList<User> users = new ArrayList<>();
    // 添加4个空User对象，用于绑定表单输入
    for (int i = 0; i < 4; i++) {
        users.add(new User());
    }
    model.addAttribute("users", users);
    return "communicationForm";
}

@PostMapping("/sendMessage")
public String submitForm(@ModelAttribute("users") ArrayList<User> users) {
    // 此处编写业务逻辑，如验证数据、发送消息等
    for (User user : users) {
        System.out.println("邮箱：" + user.getEmail() + " | 电话：" + user.getPhoneNumber() + " | 服务商：" + user.getServiceProvider());
    }
    return "success"; // 替换为实际成功页面路径
}

2. 优化User实体类（可选）

显式添加无参构造函数，确保Spring MVC能正常实例化对象：

public class User {
    String email;
    String phoneNumber;
    String serviceProvider;
    String emailSubject;
    String emailMessage;
    String textSubject;
    String textMessage;

    // 显式无参构造
    public User() {}

    // 原有getter、setter方法保持不变
}

3. 修复Thymeleaf页面（communicationForm.html）

修正绑定规则、添加用户索引、修复笔误：

<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>OverStay LLC</title>
</head>
<body>
    <h2>请提交电子邮箱地址或电话号码。若知晓服务提供商，请一并填写；若不知晓，程序将自动查询。</h2>
    <h3>服务提供商请按以下示例填写：T-Mobile、Verizon、AT&T、Visible、Mint Mobile、Metro、Xfinity Mobile。仅在您知晓的情况下填写。</h3>
    <br>

    <form th:action="@{/sendMessage}" method="post">
        <!-- 4个邮箱输入框 -->
        <h4>电子邮箱</h4>
        <div th:each="user, stat : ${users}">
            <p>
                用户[[${stat.index + 1}]]:
                <input type="text" name="users[__${stat.index}__].email" th:value="${user.email}" placeholder="输入邮箱" />
            </p>
            <br>
        </div>

        <hr>

        <!-- 4个电话号码输入框 -->
        <h4>电话号码</h4>
        <div th:each="user, stat : ${users}">
            <p>
                用户[[${stat.index + 1}]] (请勿以1作为首位数字):
                <input type="text" name="users[__${stat.index}__].phoneNumber" th:value="${user.phoneNumber}" placeholder="输入电话号码" />
            </p>
            <br>
        </div>

        <hr>

        <!-- 4个服务提供商输入框 -->
        <h4>服务提供商</h4>
        <div th:each="user, stat : ${users}">
            <p>
                用户[[${stat.index + 1}]]:
                <input type="text" name="users[__${stat.index}__].serviceProvider" th:value="${user.serviceProvider}" placeholder="输入服务提供商（可选）" />
            </p>
            <br>
        </div>

        <br><br>
        <input type="submit" value="提交"/> <input type="reset" value="重置">
    </form>

</body>
</html>

关键说明 #

• 通过th:each="user, stat : ${users}"获取循环状态变量stat，利用stat.index标识集合元素索引；
• 输入框name属性遵循集合名[索引].属性名格式，这是Spring MVC绑定集合类型参数的标准规则，提交时会自动将输入值存入对应User对象的属性中；
• 若偏好使用Thymeleaf的th:field属性，可创建包含ArrayList的表单对象作为th:object，但直接使用name属性更简洁。

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