Thymeleaf动态表单多组输入值如何绑定ArrayList传至Controller

你目前搭建的后端绑定逻辑完全可行，无法正常接收到多组产品数据的核心原因是前端输入框的命名规则不符合Spring MVC对嵌套集合参数的绑定规范，所有现有输入框的name属性没有和后端包装类的集合字段路径做关联，导致参数无法正确映射到对象列表结构中。

Spring MVC 在解析表单参数、绑定到嵌套对象/集合时，会严格按照参数名的层级路径匹配后端对象的字段：

• 针对你后端定义的ProductFormArray类，内部包含forms字段（类型为ArrayList<ProductForm>）
• 每个集合内的单个产品对象，对应的参数命名格式必须为 forms[索引序号].对象字段名
  • 比如第一组产品的name字段，input的name属性需要设置为forms[0].name
  • 同一组产品的label字段，对应name属性为forms[0].label
  • 后续追加的第二组、第三组产品，只需要依次替换索引值为1、2即可

1. 修正初始静态表单代码 #

移除原有错误的重复命名、无效的空label和重复autofocus属性，把默认展示的第一组产品的输入框name替换为符合绑定规则的格式：

<form th:action="@{/products/get}" th:object="${form}" method="post">
    <div id="fields">
        <!-- 默认展示的第一组产品（集合索引0） -->
        <input type="text" name="forms[0].name" placeholder="NAME" required/>
        <input type="text" name="forms[0].label" placeholder="LABEL" required/><br>
    </div>
    <!-- 追加产品的触发按钮 -->
    <button type="button" id="addGroupBtn">新增一组产品</button>
    <button type="submit">提交</button>
</form>

如果需要结合Thymeleaf的表单校验、字段绑定能力，初始输入框可以替换为th:field写法，Thymeleaf会自动生成匹配后端路径的name属性，例如：

<!-- 替换原有硬编码name的input -->
<input type="text" th:field="*{forms[0].name}" placeholder="NAME" required/>
<input type="text" th:field="*{forms[0].label}" placeholder="LABEL" required/><br>

2. 调整动态追加输入框的JS逻辑 #

每次点击新增按钮时，动态生成的输入框必须携带连续正确的索引值，不能沿用初始的固定name值：

// 初始已经存在索引0的一组，下一次追加的索引从1开始计数
let nextIndex = 1;
document.getElementById('addGroupBtn').addEventListener('click', () => {
    const fieldContainer = document.getElementById('fields');
    // 生成新的输入组
    const newGroup = document.createElement('div');
    newGroup.innerHTML = `
        <input type="text" name="forms[${nextIndex}].name" placeholder="NAME" required/>
        <input type="text" name="forms[${nextIndex}].label" placeholder="LABEL" required/><br>
    `;
    fieldContainer.appendChild(newGroup);
    // 索引自增，保证每一组的参数路径唯一
    nextIndex++;
});

• 不要给多个输入框设置相同的固定id，DOM id必须全局唯一，重复id会导致原生表单校验、聚焦逻辑失效
• 不要给每一个动态追加的输入框都设置autofocus属性，浏览器只会对页面中第一个带autofocus的元素生效，后续设置的属性不会触发聚焦
• 后端的ProductForm和ProductFormArray类必须保留无参构造和对应字段的getter/setter方法，Spring会自动实例化集合对象、按索引位置填充对应字段，不需要手动初始化ArrayList

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