Thymeleaf 使用 th:each 动态创建表单 [英] Thymeleaf dynamically create forms using th:each

问题描述

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

I would like to know how to create forms that uses th:object for each object looped in a th:each. For example, I have the following code.

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";
}

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

So, I would like to add a form for each object, but it seems that it is not possible and I get the following error.

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

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

So, I decided to add a @ModelAttribute in my controller, but can't get to return the actual store.

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

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

With this approach all my forms have null values. I also tried to add a @PathVariable, but can't see to bind it using th:object. Is there a solution for this?

推荐答案

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

So for anyone stuck at a similar problem. I find out a work around that might help you out. First, you can't use th:object, it simply won't cut it. Instead, do the following.

<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>

然后只需添加类似于控制器的东西.

Then just add something similar to the controller.

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

如果你想异步发送它，那么你需要添加一些 JS 代码才能让它工作.它应该类似于下面的代码.

If you want to send it asynchronously then you will need to add some JS code in order for it to work. It should look something like the code below.

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"));
});

这篇关于Thymeleaf 使用 th:each 动态创建表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！