Input in array Thymeleaf

The cause of the exception

The IllegalStateException you are getting is because th:field="${a.id}" in your select element must be related to the form th:object="${project}" element; the th:field attribute must refer to an actual field in the project instance (also you need to write th:field="*{fieldName}"). That should fix the exception you are getting, but will not solve your entire problem as the second part of it is related to how to make the values get into your controller, which I will explain next.

Sending the values to your controller

To get the values into your controller you will need to make a few changes. As I don't really know the code of your Project class, I will change a few things so you will be able to figure it out how to adapt this simple example to your particular case.

First, I understand you want to make a relation like the following in your form:

• Role1 => CollaboratorA
• Role2 => CollaboratorB

Your controller needs to receive a list and in order to receive this information we need two classes:

• The class which will be storing the individual element data, mapping a role id with the collaborator id:

  public class RoleCollaborator {
  
      private Long roleId;
  
      private Long collaboratorId;
  
      public Long getRoleId() {
          return roleId;
      }
  
      public void setRoleId(Long roleId) {
          this.roleId = roleId;
      }
  
      public Long getCollaboratorId() {
          return collaboratorId;
      }
  
      public void setCollaboratorId(Long collaboratorId) {
          this.collaboratorId = collaboratorId;
      }
  
  }
  

• A wrapper class to store a list of individual mappings:

  public class RolesCollaborators {
  
      private List<RoleCollaborator> rolesCollaborators;
  
      public List<RoleCollaborator> getRolesCollaborators() {
          return rolesCollaborators;
      }
  
      public void setRolesCollaborators(List<RoleCollaborator> rolesCollaborators) {
          this.rolesCollaborators = rolesCollaborators;
      }
  
  }
  

The next thing to do is change your controllers where you have two methods, one that handles GET requests and another one which handles the POST requests and so, receives your form data.

In the GET one:

public String projectCollaborators(@PathVariable Long projectId, Model model) {
    (... your code ...)

    model.addAttribute("project", project);

    // Add the next line to add the "rolesCollaborators" instance
    model.addAttribute("rolesCollaborators", new RolesCollaborators());

    return "project_collaborators";
}

As you can see, we added a line that will be used by the thymeleaf template. Right now is a wrapper of an empty list of roles and collaborators, but you can add values if you need to edit existing mappings instead of adding new ones.

In the POST one:

// We changed the @ModelAttribute from Project to RolesCollaborators
public String projectCollaboratorsPost(@ModelAttribute RolesCollaborators rolesCollaborators, @PathVariable Long projectId, Model model) {
   (... your code ...)
}

At this point, your controller is prepared to receive the information sent from your form, that we also need to modify.

<form th:action="@{'/project_collaborators/' + ${project.id}}" method="post" th:object="${rolesCollaborators}">
    <label th:text="'Edit Collaborators: ' + ${project.name}">Edit Collaborators: Website Project</label>
    <ul class="checkbox-list">

        <li th:each="a, stat : ${assignments}">
            <span th:text="${a.role.name}" class="primary">Developer</span>

            <div class="custom-select">
                <input type="hidden" th:id="rolesCollaborators[__${stat.index}__].roleId" th:name="rolesCollaborators[__${stat.index}__].roleId" th:value="${a.role.id}" />
                <span class="dropdown-arrow"></span>
                <select th:field="*{rolesCollaborators[__${stat.index}__].collaboratorId}">
                    <option th:each="collaborator : ${allCollaborators}" th:value="${collaborator.id}" th:text="${collaborator.name}">Michael Pemulis</option>
                </select>
            </div>
        </li>

    </ul>
    <div class="actions">
        <input type="submit" value="Save" class="button"/>
        <a href="#" class="button button-secondary">Cancel</a>
    </div>
</form>

Here there are a few changes:

• As I pointed out in The cause of the exception you need to change th:object="${project}" to th:object="${rolesCollaborators}", as rolesCollaborator is the instance name from where you will receive the values from your GET controller method and where you will be sending the values to your POST controller method.
• I added a hidden input; this input will store the role id that will be send in association to the collaborator id the user picks from the interface using the select element. Take a look at the syntax used.
• I changed the th:field value of your select element to refer to a field in the rollesCollaborators object we use in th:object="${rolesCollaborators}" form attribute. This will set the value of the collaborator in the RoleCollaborator element of the RolesCollaborators wrapped list.

With these changes your code will work. Of course, you can improve it with some other modifications, but I tried to not introduce more modifications to focus on your problem.