title: SPRING/THYMELEAF: How to fill a list in form and append another line to the form?
body: <p>I have an object:</p>
  
  <pre><code>InvoiceData
      String name
      Date date
      List&lt;InvoiceTask&gt;
  </code></pre>
  
  <p>The InvoiceTask has 3 fields:</p>
  
  <pre><code>InvoiceTask
      String name
      String project
      BigDecimal hours
  </code></pre>
  
  <p>I have created a thymeleaf formular that is creating an InvoiceData object and persisting it into my MongoDB instance, but it contains only <code>Name</code> and <code>Date</code>. I have no Idea how to modify this form to add not only a task, but multiple tasks (probably with a button "Add task" inside the form).</p>
  
  <p>The controller that is redirecting to <code>add.html</code> looks like this:</p>
  
  <pre><code>@RequestMapping(value = "/add/{id}")
  public String addPage(@PathVariable("id") String id, Model model) {
      InvoiceData invoiceData = new InvoiceData();
      model.addAttribute("contractorid", id);
      model.addAttribute("invoicedata", invoiceData);
      return "add";
  }
  </code></pre>
  
  <p>The controller that is persising the InvoiceData looks like this:</p>
  
  <pre><code>@RequestMapping(value = "/addinvoice/{id}", method = RequestMethod.POST, produces = MediaType.APPLICATION_FORM_URLENCODED_VALUE)
  public String addInvoice(@PathVariable("id") String id, InvoiceData data, Model model) {
      Contractor contractor = contractorRepository.findById(id).get();
      data.setData(contractor.getContractorData());
      if (contractor.getInvoices() == null) {
          contractor.setInvoices(new ArrayList&lt;InvoiceData&gt;());
      }
      contractor.getInvoices().add(data);
      invoiceDataRepository.save(data);
      contractorRepository.save(contractor);
      model.addAttribute("contractor", contractor);
      return "index";
  </code></pre>
  
  <p>and the Thymeleaf template for the InvoiceData looks like this (<strong>it doesnt have the InvoiceTask list yet!</strong>):</p>
  
  <pre><code>&lt;form action="#" th:action="@{addinvoice/{id}(id=${contractorid})}" th:object="${invoicedata}" method="post"&gt;
              &lt;ul class="form-style-1"&gt;
                  &lt;li&gt;
                      &lt;label&gt;Name&lt;span class="required"&gt;*&lt;/span&gt;&lt;/label&gt;
                      &lt;input type="text" th:field="*{name}" id="receptionDate"&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;label&gt;Date&lt;span class="required"&gt;*&lt;/span&gt;&lt;/label&gt;
                      &lt;input type="date" th:field="*{orderDate}" id="orderDate"&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;input type="submit" value="Submit" /&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/form&gt;
  </code></pre>
  
  <p>I'll be honest, I don't know where to start here...</p>