Unable to get updated values in a dynamically created form using Spring Boot and Thymeleaf

Question

I have created a dynamic form in Thymeleaf which populates feedbacks from all users in a table format on the UI. The form is first called when the GET Api of the controller gets hit. Relevant code for the same is given below :

allfeedbacks.html

<h2>Dynamic form</h2>
<form action="#" th:action="@{/updatefb}" th:object="${feedbacklist}"
    method="post">
    <table>
        <tr>
            <th>Message</th>
            <th>Status</th>
            <th>Comments</th>
        </tr>
        <tr th:each="feedback : ${feedbacklist.myfbList}">
            <td th:text="${feedback.message}" th:field="${feedback.message}">The
                first name</td>
            <td><select>
                    <option value="Pending"
                        th:selected="${feedback.status == 'Pending'}">Pending</option>
                    <option value="In Process"
                        th:selected="${feedback.status == 'In Process'}">In
                        Process</option>
                    <option value="Done" th:selected="${feedback.status == 'Done'}">Done</option>
            </select></td>
            <td><input type="text" placeholder="Enter Comment Here"
                name="comments" th:text="${feedback.comment}"
                th:field="${feedback.comment}" /></td>
        </tr>
    </table>
    <button type="submit">Submit</button>
</form>

Basically I have created two beans, one is the Feedback.java bean while the other is FeedbackList.java bean. Code for the same is given below :

Feedback.java

@Entity
@Table(name = "feedback")
public class Feedback implements Serializable {

private static final long serialVersionUID = -3009157732242241606L;

@Id 
private String id;

public String getId() {
    return id;
}

public String getMessage() {
    return message;
}

public String getStatus() {
    return status;
}

public String getComment() {
    return comment;
}

@Column(name = "message")
private String message;

@Column(name = "status")
private String status;

@Column(name = "comment")
private String comment;

public Feedback() {
}

public Feedback(String message, String status) {
    this.message = message;
    this.status = status;
    this.id = UUID.randomUUID().toString();     
}

FeedbackList.java

public class FeedbackList {

ArrayList<Feedback> myfbList;

public ArrayList<Feedback> getMyfbList() {
    return myfbList;
   }

public void setMyfbList(ArrayList<Feedback> myfbList) {
    this.myfbList = myfbList;
   }
}

Relevant code from my Controller class is as follows :

    @RequestMapping(value = "/getAll", method = RequestMethod.GET)
    public String getAllFeedbacks(@Valid FeedbackList feedbacklist, 
    BindingResult bindingResult, Model model) {

    ArrayList<Feedback> fbarray = new ArrayList<>();
    for (Feedback fb : repository.findAll()) {
        fbarray.add(fb);
        }
    feedbacklist.setMyfbList(fbarray);
    model.addAttribute("feedback", new Feedback());
    model.addAttribute("feedbacklist", feedbacklist);
    return "allfeedbacks";
    }

    @RequestMapping(value = "/updatefb", method = RequestMethod.POST)
    public String updatefbStatus(@Valid FeedbackList feedbacklist, 
    BindingResult 
    bindingResult, Model model) {

    //feedbacklist is coming as NULL below
    for (Feedback fb : feedbacklist.getMyfbList()) {
        System.out.println(fb.getComment());
        System.out.println(fb.getMessage());
        System.out.println(fb.getStatus());
        }
    // Code to update the database with the new status and comment would go
    // here
    return "result";
   }

The form is getting properly rendered on the UI when I fire the Get request, however, when I make some changes in the form and submit it ( POST ), feedbacklist is coming as NULL. Could anyone please guide me with this ?

Answer 1

To use a list inside a form with Thymeleaf is a little bit more tricky, you need to use an specific syntax, here i show you an example.

<tr th:each="feedback : ${feedbacklist.myfbList}">
    <td th:field="*{myfbList[__${feedbackStat.index}__].message}">The
        first name
    </td>
    ...//Same for others fields
</tr>

In thymeleaf you have to use the Stat object to say the array position where you want to set the value, also as normal fields inside an object you have to use the '*' notation.