ThymeleafでPOST時にListで値を送信する方法

ThymeleafでPOST時にListで値を送信する方法

ThymeleafでPOST時にListで値を送信する方法を示すサンプルコードを以下に示します。
フォームの送信、バリデーション、コントローラの処理を含めています。

HTML（Thymeleafテンプレート）

<form action="#" th:action="@{/submit}" th:object="${form}" method="post">
  <div th:each="item, iterStat : ${form.items}">
    <input type="text" th:field="*{items[__${iterStat.index}__]}" />
    <span th:if="${#fields.hasErrors('items[' + iterStat.index + ']')}"
          th:errors="*{items[__${iterStat.index}__]}"></span>
  </div>
  <button type="submit">送信</button>
</form>

コントローラ（SpringBoot）

import org.springframework.stereotype.Controller;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import javax.validation.Valid;
import org.springframework.web.servlet.ModelAndView;

@Controller
@RequestMapping("/submit")
public class FormController {

  @PostMapping
  public ModelAndView submitForm(@Valid @ModelAttribute("form") Form form, BindingResult result) {
    if (result.hasErrors()) {
      return new ModelAndView("form", "form", form);
    }

    // Formの処理
    return new ModelAndView("success");
  }
}

フォームクラス（Java）

import javax.validation.constraints.NotEmpty;
import javax.validation.constraints.Size;
import java.util.List;

public class Form {

  @NotEmpty(message = "項目は空であってはなりません")
  @Size(min = 1, message = "少なくとも1つの項目が必要です")
  private List<@Size(min = 1, message = "項目は空であってはなりません") String> items;

  // ゲッターとセッター
  public List<String> getItems() {
    return items;
  }

  public void setItems(List<String> items) {
    this.items = items;
  }
}

バリデーション

1. HTMLフォーム
th:field を使用してフォーム要素にバインドします。
エラーメッセージはth:errorsで表示します。
2. コントローラ
@Valid アノテーションでフォームデータをバリデーションし、BindingResult でエラーがあればフォームを再表示します。
3. フォームクラス
@NotEmpty や @Size アノテーションを使用して、リスト内のアイテムに対するバリデーションを行います。

このコードは、フォームでListのデータを送信し、サーバー側でそのデータをバリデーションする基本的な方法を示しています。