Using thymeleaf to post form data to a Controller that uses #ModelAttribute (complex objects) - spring

Question

There is the Element class:
public class Element {
private Long id;
private Name name;
// Getters and Setters ...
}
And the Name class:
public class Name {
private String en;
private String fr;
private String de;
// Getters and Setters ...
}
There is a getElementsController:
#GetMapping("/elements/create")
public String getElementsCreate() {
return "private/new-element";
}
There is a NewElementController controller:
#PostMapping("/elements/create")
public String postElementsCreate(#ModelAttribute Element element) {
System.out.println(element)
return null;
}
There is a form that posts data to the NewElementController:
<form method="post" th:object="${element}" th:action="#{/elements/create}">
<input type="text" value="1" name="id" placeholder="Id"/>
// How should I make the input fields for:
element.name.en ?
element.name.fr ?
element.name.de ?
<button type="submit">Save element</button>
</form>
Setting the Id works, but I can not access the name field (it is an object)
I have tried with th:field="*{name}" and with th:field="*{name.en}", but it does not work in that way.

Answer 1

Try following:
<form method="post" th:object="${element}" th:action="#{/elements/create}">
<input type="text" name="id" th:value="*{id}" placeholder="Id"/>
<input type="text" name="name.en" th:value="*{name.en}" placeholder="Name (EN)"/>
<input type="text" name="name.fr" th:value="*{name.fr}" placeholder="Name (FR)"/>
<input type="text" name="name.de" th:value="*{name.de}" placeholder="Name (DE)"/>
<button type="submit">Save element</button>
</form>
Yor controller method for GET should be like this:
#GetMapping("/elements/create")
public String getElementsCreate(Model model) {
Element element = new Element();
Name name = new Name();
element.setName(name);
model.addAttribute("element", element);
return "private/new-element.html";
}