title: How to bind an object list with thymeleaf?
body: <p>I am having a lot of difficulty with POSTing back a form to the controller, which should contain simply an arraylist of objects that the user may edit. </p>
  
  <p>The form loads up correctly, but when it's posted, it never seems to actually post anything. </p>
  
  <p>Here is my form: </p>
  
  <pre><code>&lt;form action="#" th:action="@{/query/submitQuery}" th:object="${clientList}" method="post"&gt;
  
  &lt;table class="table table-bordered table-hover table-striped"&gt;
  &lt;thead&gt;
      &lt;tr&gt;
          &lt;th&gt;Select&lt;/th&gt;
          &lt;th&gt;Client ID&lt;/th&gt;
          &lt;th&gt;IP Addresss&lt;/th&gt;
          &lt;th&gt;Description&lt;/th&gt;            
     &lt;/tr&gt;
   &lt;/thead&gt;
   &lt;tbody&gt;     
       &lt;tr th:each="currentClient, stat : ${clientList}"&gt;         
           &lt;td&gt;&lt;input type="checkbox" th:checked="${currentClient.selected}" /&gt;&lt;/td&gt;
           &lt;td th:text="${currentClient.getClientID()}" &gt;&lt;/td&gt;
           &lt;td th:text="${currentClient.getIpAddress()}"&gt;&lt;/td&gt;
           &lt;td th:text="${currentClient.getDescription()}" &gt;&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
    &lt;/table&gt;
    &lt;button type="submit" value="submit" class="btn btn-success"&gt;Submit&lt;/button&gt;
    &lt;/form&gt;
  </code></pre>
  
  <p>Above works fine, it loads up the list correctly. However, when I POST, it returns a empty object (of size 0). I believe this is due to the lack of <code>th:field</code>, but anyway here is controller POST method: </p>
  
  <pre><code>...
  private List&lt;ClientWithSelection&gt; allClientsWithSelection = new ArrayList&lt;ClientWithSelection&gt;();
  //GET method
  ...
  model.addAttribute("clientList", allClientsWithSelection)
  ....
  //POST method
  @RequestMapping(value="/submitQuery", method = RequestMethod.POST)
  public String processQuery(@ModelAttribute(value="clientList") ArrayList clientList, Model model){
      //clientList== 0 in size
      ...
  }
  </code></pre>
  
  <p>I have tried adding a <code>th:field</code> but regardless of what I do, it causes an exception. </p>
  
  <p>I've tried: </p>
  
  <pre><code>...
  &lt;tr th:each="currentClient, stat : ${clientList}"&gt;   
       &lt;td&gt;&lt;input type="checkbox" th:checked="${currentClient.selected}"  th:field="*{}" /&gt;&lt;/td&gt;
  
      &lt;td th th:field="*{currentClient.selected}" &gt;&lt;/td&gt;
  ...
  </code></pre>
  
  <p>I cannot access currentClient (compile error), I can't even select clientList, it gives me options like <code>get()</code>, <code>add()</code>, <code>clearAll()</code> etc, so it things it should have an array, however, I cannot pass in an array. </p>
  
  <p>I've also tried using something like <code>th:field=${}</code>, this causes runtime exception</p>
  
  <p>I've tried </p>
  
  <pre><code>th:field = "*{clientList[__currentClient.clientID__]}" 
  </code></pre>
  
  <p>but also compile error. </p>
  
  <p>Any ideas?</p>
  
  <hr>
  
  <h2><strong>UPDATE 1:</strong></h2>
  
  <p>Tobias suggested that I need to wrap my list in a wraapper. So that's what I did: </p>
  
  <p><strong>ClientWithSelectionWrapper:</strong></p>
  
  <pre><code>public class ClientWithSelectionListWrapper {
  
  private ArrayList&lt;ClientWithSelection&gt; clientList;
  
  public List&lt;ClientWithSelection&gt; getClientList(){
      return clientList;
  }
  
  public void setClientList(ArrayList&lt;ClientWithSelection&gt; clients){
      this.clientList = clients;
  }
  }
  </code></pre>
  
  <p><strong>My page:</strong> </p>
  
  <pre><code>&lt;form action="#" th:action="@{/query/submitQuery}" th:object="${wrapper}" method="post"&gt;
  ....
   &lt;tr th:each="currentClient, stat : ${wrapper.clientList}"&gt;
       &lt;td th:text="${stat}"&gt;&lt;/td&gt;
       &lt;td&gt;
           &lt;input type="checkbox"
                  th:name="|clientList[${stat.index}]|"
                  th:value="${currentClient.getClientID()}"
                  th:checked="${currentClient.selected}" /&gt;
       &lt;/td&gt;
       &lt;td th:text="${currentClient.getClientID()}" &gt;&lt;/td&gt;
       &lt;td th:text="${currentClient.getIpAddress()}"&gt;&lt;/td&gt;
       &lt;td th:text="${currentClient.getDescription()}" &gt;&lt;/td&gt;
   &lt;/tr&gt;
  </code></pre>
  
  <p>Above loads fine: 
  <a href="https://i.stack.imgur.com/LtWJm.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/LtWJm.jpg" alt="enter image description here"></a></p>
  
  <p>Then my controller: </p>
  
  <pre><code>@RequestMapping(value="/submitQuery", method = RequestMethod.POST)
  public String processQuery(@ModelAttribute ClientWithSelectionListWrapper wrapper, Model model){
  ... 
  }
  </code></pre>
  
  <p>The page loads correctly, the data is displayed as expected. If I post the form without any selection I get this: </p>
  
  <pre><code>org.springframework.expression.spel.SpelEvaluationException: EL1007E:(pos 0): Property or field 'clientList' cannot be found on null
  </code></pre>
  
  <p>Not sure why it's complaining</p>
  
  <p>(In the GET Method it has: <code>model.addAttribute("wrapper", wrapper);</code>)</p>
  
  <p><a href="https://i.stack.imgur.com/V5FMr.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/V5FMr.jpg" alt="enter image description here"></a></p>
  
  <p>If I then make a selection, i.e. tick the first entry: </p>
  
  <pre><code>There was an unexpected error (type=Bad Request, status=400).
  Validation failed for object='clientWithSelectionListWrapper'. Error count: 1
  </code></pre>
  
  <p>I'm guessing my POST controller is not getting the clientWithSelectionListWrapper. Not sure why, since I have set the wrapper object to be posted back via the <code>th:object="wrapper"</code> in the FORM header. </p>
  
  <hr>
  
  <h2><strong>UPDATE 2:</strong></h2>
  
  <p>I've made some progress! Finally the submitted form is being picked up by the POST method in controller. However, all the properties appear to be null, except for whether the item has been ticked or not. I've made various changes, this is how it is looking: </p>
  
  <pre><code>&lt;form action="#" th:action="@{/query/submitQuery}" th:object="${wrapper}" method="post"&gt;
  ....
   &lt;tr th:each="currentClient, stat : ${clientList}"&gt;
       &lt;td th:text="${stat}"&gt;&lt;/td&gt;
       &lt;td&gt;
           &lt;input type="checkbox"
                  th:name="|clientList[${stat.index}]|"
                  th:value="${currentClient.getClientID()}"
                  th:checked="${currentClient.selected}"
                  th:field="*{clientList[__${stat.index}__].selected}"&gt;
       &lt;/td&gt;
       &lt;td th:text="${currentClient.getClientID()}"
           th:field="*{clientList[__${stat.index}__].clientID}"
           th:value="${currentClient.getClientID()}"
       &gt;&lt;/td&gt;
       &lt;td th:text="${currentClient.getIpAddress()}"
           th:field="*{clientList[__${stat.index}__].ipAddress}"
           th:value="${currentClient.getIpAddress()}"
       &gt;&lt;/td&gt;
       &lt;td th:text="${currentClient.getDescription()}"
           th:field="*{clientList[__${stat.index}__].description}"
           th:value="${currentClient.getDescription()}"
       &gt;&lt;/td&gt;
       &lt;/tr&gt;
  </code></pre>
  
  <p>I also added a default param-less constructor to my wrapper class and added a <code>bindingResult</code> param to POST method (not sure if needed). </p>
  
  <pre><code>public String processQuery(@ModelAttribute ClientWithSelectionListWrapper wrapper, BindingResult bindingResult, Model model)
  </code></pre>
  
  <p>So when an object is being posted, this is how it is looking: 
  <a href="https://i.stack.imgur.com/ZR9Gz.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ZR9Gz.png" alt="enter image description here"></a></p>
  
  <p>Of course, the systemInfo is supposed to be null (at this stage), but the clientID is always 0, and ipAddress/Description always null. The selected boolean is correct though for all properties. I'm sure I've made a mistake on one of the properties somewhere. Back to investigation. </p>
  
  <hr>
  
  <h2><strong>UPDATE 3:</strong></h2>
  
  <p>Ok I've managed to fill up all the values correctly! But I had to change my <code>td</code> to include an <code>&lt;input /&gt;</code> which is not what I wanted... Nonetheless, the values are populating correctly, suggesting spring looks for an input tag perhaps for data mapping?</p>
  
  <p>Here is an example of how I changed the clientID table data: </p>
  
  <pre><code>&lt;td&gt;
   &lt;input type="text" readonly="readonly"                                                          
       th:name="|clientList[${stat.index}]|"
       th:value="${currentClient.getClientID()}"
       th:field="*{clientList[__${stat.index}__].clientID}"
    /&gt;
  &lt;/td&gt;
  </code></pre>
  
  <p>Now I need to figure out how to display it as plain data, ideally without any presence of an input box...</p>