SpringBoot+Thymeleaf表单提交报Required Product parameter不存在400错误解决

问题根因 #

• 1. 保存接口参数注解使用错误：@RequestParam用于接收单个请求参数，你需要接收表单封装的完整Product对象，应该使用@ModelAttribute注解，你指定了要求名为product的请求参数，但表单提交的是Product的各个属性字段，不存在名为product的单个参数，所以抛出参数缺失异常。
• 2. 新增产品页面初始化时没有传递空的Product对象给模板：你在Thymeleaf中用th:object="${product}"绑定了表单对象，但/addProduct接口没有往Model中添加product属性，导致表单绑定失败，提交的参数无法正确映射。
• 3. Thymeleaf下拉框语法错误：th:field需要绑定在<select>标签而非<option>标签上，同时你写的value=th:value、value=th:field属于语法错误，Thymeleaf属性不需要加value=前缀。

修复代码 #

1. 控制器代码修改 #

// my Controller
// this code to get all product type and dispaly at (select option)
    @GetMapping("/addProduct")
    @PermissionCheck(workspace = { Workspace.ADD_PRODUCT }, read = true)
    public String AddProduct(Model model) {
        List<CreateReactor> reactors = reactorService.getCertifiedReactor("1");
        model.addAttribute("listreactors", reactors);
        // 新增：传递空Product对象给模板做表单绑定
        model.addAttribute("product", new Product());
        return "addProduct";
    }

// this code to save product after select product type
    @RequestMapping(value = "/saveProduct", method = RequestMethod.POST)
    @PermissionCheck(workspace = { Workspace.SAVE_PRODUCT }, read = true, write = true)
    // 修改：把@RequestParam换成@ModelAttribute
    public String saveProduct(@ModelAttribute("product") Product product) throws Exception {
        productService.saveProduct(product);
        return "Dashboard";
    }

2. Thymeleaf页面代码修改 #

<form id="quickForm" th:action="@{/saveProduct}" th:object="${product}" method="POST">
    <div class="row">
        <div class="col-12 col-sm-6">
            <div class="form-group">
                <label for="exampleInputPassword1">Product Name</label>
                <div class="input-group">
                    <!-- 新增th:field绑定product的productName属性 -->
                    <select class="form-control select2" style="width: 100%;" th:field="*{productName}">
                        <option value="" selected="selected">- Product Name -</option>
                        <!-- 修正th:value写法 -->
                        <option th:value="'Carbon Clean'"> Carbon Clean </option>
                    </select>
                </div>
            </div>
        </div>

        <div class="col-12 col-sm-6">
            <div class="form-group">
                <label for="exampleInputPassword1">Product ID</label>
                <div class="input-group">
                    <!-- 新增th:field绑定product的proId属性 -->
                    <select class="form-control select2" style="width: 100%;" th:field="*{proId}">
                        <option value="0" selected="selected">- Product Id -</option>
                        <!-- 修正th:value写法，移除错误的th:field -->
                        <option th:each="reactors : ${listreactors}" 
                                th:text="${reactors.reactorId}" 
                                th:value="${reactors.reactorId}">
                        </option>
                    </select>
                </div>
            </div>
        </div>
    </div>
    <button class="btn btn-primary"><i class="fas fa-save"></i> Save Product</button>
</form>

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