Thymeleaf使用th:each动态创建表单

Question

我想知道如何为th:each循环的每个对象创建使用th:object的表单。例如，我有以下代码。

.HTML

<th:block th:each="store: ${stores}">
    <form th:object="${store}" th:action="@{/modify-store}">
        <input th:field="*{idStorePk}"/>
        <input th:field="*{name}"/>
        <input th:field="*{phoneNumber}"/>
        <button type="submit">Modify</button>
    </form>
</th:block>

控制器

@RequestMapping(value = "/stores")
public String getIndex(Model model) {
    model.addAttribute("stores", storeService.getAllStores());
    return "store";
}

所以，我想为每个对象添加一个表单，但似乎不可能，我得到以下错误。

java.lang.IllegalStateException: Neither BindingResult nor plain target object for bean name 'store' available as request attribute

因此，我决定在我的控制器中添加一个@ModelAttribute，但无法返回实际的商店。

@ModelAttribute("store")
public Store getStore(Store store) {
    return store;
}

使用这种方法，我的所有表单都具有空值。我也尝试添加一个@PathVariable，但看不到使用 th:object 绑定它。有解决方案吗？

Answer 1

所以对于任何遇到类似问题的人来说。我找到了一个可能会帮助你的解决方法。首先，你不能使用th:object，它根本不会削减它。相反，请执行以下操作。

<th:block th:each="store: ${stores}">
    <form class="store-form" th:action="@{/modify-store}">
        <input th:name="idStorePk" th:value="${store.idStorePk}"/>
        <input th:name="name" th:value="${store.name}"/>
        <input th:name="phoneNumber" th:value="${store.phoneNumber}"/>
        <button class="submit-button" type="submit">Modify</button>
    </form>
</th:block>

然后只需添加类似于控制器的内容。

@PostMapping(value = "/modify-store")
@ResponseBody
public boolean deleteEntry(@ModelAttribute Store store) throws Exception {
    // Your code here...
    return true;
}

如果要异步发送它，则需要添加一些JS代码才能使其正常工作。它应该看起来像下面的代码。

const forms = document.querySelectorAll('.store-form');
forms.forEach(form => {
   form.addEventListener('submit', event => {
   // Stop the normal form submit triggered by the submit button
   event.preventDefault();
   const formInputs = form.getElementsByTagName("input");
   let formData = new FormData();
   for (let input of formInputs) {
       formData.append(input.name, input.value);
   }
   fetch(form.action,
   {
        method: form.method,
        body: formData
   })
   .then(response => response.json())
   .then(data => console.log(data))
   .catch(error => console.log(error.message))
   .finally(() => console.log("Done"));
});

Answer 2

您在控制器中以模型属性发送商店，并在您提交表单的第二个控制器上发送商店，您正在使用商店，这就是您收到此错误的原因。因此，请更正任何一个控制器上的拼写错误。喜欢这个：-

@RequestMapping(value = "/stores")
public String getIndex(Model model) {
    model.addAttribute("stores", storeService.getAllStores());
    return "store";
}

您提交表单的第二个控制器将是这样的 -

@ModelAttribute("stores")
public Store getStore(Store store) {
    return store;
}