thymeleaf binding collections

Question

I have a problem with binding collections using spring and thymeleaf. Every time I send form, my object collections are set to null (User.postions), my example below:

My Controller:

@RequestMapping(value = urlFragment + "/add", method = RequestMethod.GET)
public String addPosition(Model model) {

    HashSet<Position> positions = new HashSet<Position>(positionRepository.findByEnabledTrueOrderByNameAsc());

    User employee = new User();

    for (Position position : positions) {
        employee.addPosition(position);
    }

    model.addAttribute("employee", employee);

    return "crud/employee/add";
}

@RequestMapping(value = urlFragment + "/add", method = RequestMethod.POST)
public String processNewEmployee(Model model, @Valid @ModelAttribute("employee") User employee, BindingResult result) {
    String templatePath = "crud/employee/add";

    if (!result.hasErrors()) {
        userRepository.save(employee);
        model.addAttribute("success", true);
    }

    return templatePath;
}

And my employee form:

<form action="#" th:action="@{/panel/employee/add}" th:object="${employee}" method="post">

    <div class="row">
        <div class="col-md-6">
            <label th:text="#{first_name}">First name</label>
            <input class="form-control" type="text" th:field="*{userProfile.firstName}"/>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <label th:text="#{last_name}">Last name</label>
            <input class="form-control" type="text" th:field="*{userProfile.lastName}"/>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <label th:text="#{email}">Email</label>
            <input class="form-control" type="text" th:field="*{email}"/>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <label th:text="#{position}">Position</label>
            <select th:field="*{positions}" class="form-control">
                <option th:each="position : *{positions}"
                        th:value="${position.id}"
                        th:text="${position.name}">Wireframe
                </option>
            </select>
        </div>
    </div>


    <div class="row">
        <div class="col-md-5">
            <div class="checkbox">
                <button type="submit" class="btn btn-success" th:text="#{add_employee}">
                    Add employee
                </button>
            </div>
        </div>
    </div>
</form>

User entity:

@Entity
@Table(name="`user`")
public class User extends BaseModel {

    @Column(unique = true, nullable = false, length = 45)
    private String email;

    @Column(nullable = false, length = 60)
    private String password;

    @Column
    private String name;

    @Column
    private boolean enabled;

    @ManyToMany(fetch = FetchType.EAGER, cascade = CascadeType.ALL)
    @JoinTable(name = "user_role",
            joinColumns = {@JoinColumn(name = "user_id", nullable = false)},
            inverseJoinColumns = {@JoinColumn(name = "role_id", nullable = false)}
    )
    private Collection<Role> roles = new HashSet<Role>();

    @ManyToMany(fetch = FetchType.LAZY, cascade = CascadeType.ALL)
    @JoinTable(name = "user_position",
            joinColumns = {@JoinColumn(name = "user_id", nullable = false)},
            inverseJoinColumns = {@JoinColumn(name = "position_id", nullable = false)}
    )
    private Collection<Position> positions = new HashSet<Position>();

    public User() {
    }

    public User(String email, String password, boolean enabled) {
        this.email = email;
        this.password = password;
        this.enabled = enabled;
    }

    public User(String email, String password, boolean enabled, Set<Role> roles) {
        this.email = email;
        this.password = password;
        this.enabled = enabled;
        this.roles = roles;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }

    public boolean isEnabled() {
        return enabled;
    }

    public void setEnabled(boolean enabled) {
        this.enabled = enabled;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public Collection<Position> getPositions() {
        return positions;
    }

    private void setPositions(Collection<Position> positions) {
        this.positions = positions;
    }

    public boolean addPosition(Position position) {
        return positions.add(position);
    }

    public boolean removePosition(Position position) {
        return positions.remove(position);
    }

    public Collection<Role> getRoles() {
        return roles;
    }

    private void setRoles(Collection<Role> roles) {
        this.roles = roles;
    }

    public boolean addRole(Role role) {
        return roles.add(role);
    }

    public boolean removeRole(Role role) {
        return roles.remove(role);
    }

    @Override
    public String toString() {
        return User.class + " - id: " + getId().toString() + ", email: " + getEmail();
    }
}

I have read somewhere that I have to create equals() and hashCode(), so I did it in my Position Entity.

public boolean equals(Position position) {
    return this.getId() == position.getId();
}

public int hashCode(){
    return this.getId().hashCode() ;
}

Here are data sent by post method: POST data

And here is my result: debugger result

My spring version: 4.1.6.RELEASE thymeleaf-spring4 version: 2.1.4.RELEASE thymeleaf-layout-dialect version: 1.2.8

O course I wish positions to were HashCode with one element of object Position with id = 2. Could you help me? What I am doing wrong?

Yes, constructor is empty "public User() {}", but I initialize positions field "private Collection positions = new HashSet();" if you asking about it? — Purzynski, May 25 '15 at 08:30
No as in please paste in your User() class code. My miscommunication — Aeseir, May 25 '15 at 08:31

score 1 · Answer 1 · answered Jun 28 '15 at 16:42

It's because you're using ${position.id} for your option value. This means spring can't work out the relationship between the id used in the value and the actual Position objects. Try just ${position} for your value and it should work:

                    <select th:field="*{positions}" class="form-control">
                        <option th:each="position : *{positions}"
                                th:value="${position}"
                                th:text="${position.name}">Wireframe
                        </option>
                    </select>

(Make sure you've implemented hashCode and equals on your Position class)

If that still doesn't work you might have to implement a Formatter for Position, to make the conversion explicit. See this example thymeleafexamples-selectmultiple.

How to do something similar with checkboxes? – Antoniossss Sep 07 '17 at 16:11 — Antoniossss, Sep 07 '17 at 16:11

score 1 · Answer 2 · edited May 23 '17 at 12:06

I had similar problem that I resolved by adding Formatter class and adding Formatter to the configuration of the MVC:

@Override
protected void addFormatters(FormatterRegistry registry){
    registry.addFormatter(new PositionFormater());
    ...
}

and Position class formatter should look something like this:

PositionFormatter:

public class PositionFormatter implements Formatter<Position>{

/** String representing null. */
private static final String NULL_REPRESENTATION = "null";

@Resource
private PositionRepository positionRepository;

public PositionFormatter() {
    super();
}

@Override
public String print(Position position, Locale locale) {
    if(position.equals(NULL_REPRESENTATION)){
        return null;
    }
    try {
        Position newPosition = new Position();
        newPosition.setId(position.getId());
        return newPosition.getId().toString();
    } catch (NumberFormatException e) {
        throw new RuntimeException("Failed to convert `" + position + "` to a valid id");
    }

}

@Override
public Position parse(String text, Locale locale) throws ParseException {
    if (text.equals(NULL_REPRESENTATION)) {
        return null;
    }
    try {
        Long id = Long.parseLong(text);
        Position position = new Position();
        position.setId(id);
        return position;
    } catch (NumberFormatException e) {
        throw new RuntimeException("Failed to convert `" + text + "` to valid Position");
    }
  }
}

In my case, these two solved all of the problems. I have several formatters, all I do is make one and add it to the config file (WebMVCConfig in my case)

Check my original post where I resolved this problem

score 0 · Accepted Answer · edited May 23 '17 at 10:26

Thanks Guys for answering my question. You help me a lot. Unfortunately I have to disagree with you in one thing. You have shown me example with:

newPosition.setId(position.getId());

The same example was in Andrew github repository. I think that this is bad practice to use setId() method. So I will present my solution and I will wait for some comments before I will mark it as an answer.

WebMvcConfig Class

@Configuration
@EnableWebMvc
@ComponentScan(basePackages = "com.smartintranet")
public class WebMvcConfig extends WebMvcConfigurerAdapter {

    @PersistenceContext
    private EntityManager entityManager;

    // (....rest of the methods.......)

    @Override
    public void addFormatters(FormatterRegistry formatterRegistry) {
        formatterRegistry.addFormatter(new PositionFormatter(entityManager));
    }
}

PositionFormatter class

public class PositionFormatter implements Formatter<Position> {

    private EntityManager entityManager;

    public PositionFormatter(EntityManager entityManager) {
        this.entityManager = entityManager;
    }

    public String print(Position position, Locale locale) {
        if(position.getId() == null){
            return "";
        }

        return position.getId().toString();
    }

    public Position parse(String id, Locale locale) throws ParseException {
        return entityManager.getReference(Position.class, Long.parseLong(id));
    }
}

employeeForm.html

                <div class="col-md-6">
                    <label th:text="#{position}">Position</label>
                    <select th:field="*{position}" class="form-control">
                        <option th:each="position : ${allPositions}"
                                th:value="${position.id}"
                                th:text="${position.name}">Wireframe
                        </option>
                    </select>
                </div>

And last one, EmployeeController Class

@Controller
public class EmployeeController extends AbstractCrudController {    
    // (...rest of dependency and methods....)

    @Transactional
    @RequestMapping(value = urlFragment + "/create", method = RequestMethod.GET)
    public String createNewEmployee(Model model) {
        prepareEmployeeForm(model);
        return "crud/employee/create";
    }

    @Transactional
    @RequestMapping(value = urlFragment + "/create", method = RequestMethod.POST)
    public String processNewEmployee(Model model, @ModelAttribute("employee") Employee employee, BindingResult result) {
        if (!result.hasErrors()) {
            // Look here it is important line!
            entityManager.merge(employee.getUser());
        }

        prepareEmployeeForm(model);

        return "crud/employee/create";
    }
}

It is my solution. What is bad here? I think that line:

entityManager.merge(employee.getUser());

I can't use here:

userRepository.save(employee.getUser());

Because Position entity is detached, and when I use save method it runs in this situation em.persist() so I ran manually em.merge(). I know that this code is not perfect but I think that this solution is better then use setId(). I will be grateful for constructive critic.

One more time thanks Andrew and Blejzer for help without you I would not do it. I have marked yours answer as useful.

thymeleaf binding collections

3 Answers3

Linked