如何使用 thymeleaf 在具有动态列的数据表中显示输入值

Question

I am trying to create a form list with a Data Table where I place some input values from a collection. The fact is that I don't know how to display the values with connection with the Controller to display and register the values from the input correctly.

This is the DTO I want to display as a Form List:

@Data
public class ComponentPeriodValues {

private int idComponent;
private String description;
private List<String> periods;
private List<BigDecimal> values;

}

All records have equal numbers of periods and I am trying to build a data table like below:

My HTML is like below:

<div id="data" th:unless="${cpv == null}" style="width:100%;height:500px;overflow:auto;">
    <form action="#" th:action="@{/planning-components/save}"
        th:object="${cpv}" method="POST">

        <table class="table table-bordered table-striped">
            <thead class="thead-dark">
                <tr>
                    <th>Description</th>
                    <th:block th:each="p : ${cpv[0].periods}">
                        <th th:text="${p}"></th>
                    </th:block>
                </tr>
            </thead>

            <tbody>
                <tr th:each="c : ${cpv}">
                    <td th:text="${c.description}" />
                    <th:block th:each="v : ${c.values}">
                        <td>
                            <input type="text" th:field="*{v}"
                                class="form-control mb-4 col-4"/>
                        </td>
                    </th:block>
                </tr>
            </tbody>        
        </table>

        <button type="submit" class="btn btn-info col-2">Save</button>
    </form>
</div>

But, when I use this input field, I got this error:

Caused by: org.springframework.beans.NotReadablePropertyException: Invalid property 'v' of bean class [java.util.ArrayList]: Bean property 'v' is not readable or has an invalid getter method: Does the return type of the getter match the parameter type of the setter?

When I use an plain text field it works..

So, my question is: How can I use input fields here to reflect changes in the DTO and then work with my DTO updated in order to process the update into the database?

Answer 1

I don't know much about thyme leaf syntax but I understand how spring-mvc data bind works. You may need to change few thyme leaf syntax but here is what you need to do -

Wrap your list of ComponentPeriodValues in another class like this

@Data
public class ComponentPeriodCommand implements Serializable {

    private static final long serialVersionUID = 1L;

    private List<ComponentPeriodValues> cpvs;
}

Now to bind values to your list your html needs to look something like this for fist row second column and so on

    <input type="text" name="cpvs[0].values[1]" class="form-control mb-4 col-4"/>

According to this baeldung post you can get index in thymeleaf like

<div id="data" th:unless="${cpv == null}" style="width:100%;height:500px;overflow:auto;">
    <form action="#" th:action="@{/planning-components/save}"
        th:object="${command}" method="POST">

        <table class="table table-bordered table-striped">
            <thead class="thead-dark">
                <tr>
                    <th>Description</th>
                    <th:block th:each="p : ${cpv[0].periods}">
                        <th th:text="${p}"></th>
                    </th:block>
                </tr>
            </thead>

            <tbody>
                <tr th:each="c, iterC : ${command.cpvs}">
                    <td th:text="${c.description}" />
                    <th:block th:each="v, iter : ${c.values}">
                        <td>
                            <input type="text" th:field="*{cpvs[__${iterC.index}__].values[__${iter.index}__]}" class="form-control mb-4 col-4"/>
                        </td>
                    </th:block>
                </tr>
            </tbody>        
        </table>

        <button type="submit" class="btn btn-info col-2">Save</button>
    </form>
</div>