Thymeleafでformタグを入れ子にしたいときの対処法とデータの受け渡し方

やりたいこと

• 下記画面に個別削除機能をつけたい
  

• その際のHTMLのテーブルのソースコードは以下の通り

<table th:if="!${#lists.isEmpty(userList)}">
    <thead>
    <tr>
        <th>ID</th>
        <th>ユーザ名</th>
        <th>削除</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="user:${userList}">
        <td th:text="${user.userId}"></td>
        <td th:text="${user.name}"></td>
        <td>
            <form th:action="@{/user/delete}" method="post">
                <input type="hidden" name="userId" th:value="${user.userId}">
                <input type="submit" value="削除">
            </form>
        </td>
    </tr>
    </tbody>
</table>

躓いたところ

• 最初は下記のようなコードにしようと思っていた
• しかしHTMLの仕様でformタグは入れ子にできない制約がある

<div th:if="!${#lists.isEmpty(userList)}">
<form th:action="@{/user/deleteAll}" method="post" th:object="${deleteForm}">
<table>
    <thead>
    <tr>
        <th>選択</th>
        <th>ID</th>
        <th>ユーザ名</th>
        <th>削除</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="user:${userList}">
        <td>
            <input type="checkbox" th:value="${user.userId}" th:field="*{deleteList}">
        </td>
        <td th:text="${user.userId}"></td>
        <td th:text="${user.name}"></td>
        <td>
            <form th:action="@{/user/delete}" method="post">
                <input type="hidden" name="userId" th:value="${user.userId}">
                <input type="submit" value="削除">
            </form>
        </td>
    </tr>
    </tbody>
</table>
<input type="submit" value="選択したものを一括削除">
</form>
</div>

解決策

• inputタグにform属性を追加して対応するformタグのid属性に同じものを指定するとformタグ内にないinputタグのボタンクリックを処理することができる
• またThymeleafでinputタグの値をオブジェクトに渡したいとき通常formタグにth:objectを指定してinputタグのth:feiledでどのメンバ変数に値を格納するか*{メンバ変数名}のような形で指定するが今回の場合はform配下に対象のinputタグがないため下記のようにth:fieldは省略しない形で書くと指定したメンバ変数に値を格納できる

<div th:if="!${#lists.isEmpty(userList)}">
<table>
    <thead>
    <tr>
        <th>選択</th>
        <th>ID</th>
        <th>ユーザ名</th>
        <th>削除</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="user:${userList}">
        <td>
            <input form="deleteListForm" type="checkbox" th:value="${user.userId}" th:field="${deleteForm.deleteList}">
        </td>
        <td th:text="${user.userId}"></td>
        <td th:text="${user.name}"></td>
        <td>
            <form th:action="@{/user/delete}" method="post">
                <input type="hidden" name="userId" th:value="${user.userId}">
                <input type="submit" value="削除">
            </form>
        </td>
    </tr>
    </tbody>
</table>
<form id="deleteListForm" th:action="@{/user/deleteAll}" method="post">
    <input type="submit" value="選択したものを一括削除">
</form>
</div>

ソースコード

• 今回作成したソースコード