Spring boot + ThymeleafでフォームをPOSTする

Spring boot + ThymeleafでフォームをPOSTする
1. 関連

Spring boot + ThymeleafでフォームをPOSTする

Thymeleafってよくよく考えると使ったことなかったので、今日ちょっと使ってみました。

画面からフォームをサブミットして結果を確認画面に渡すサンプルです。

コントローラ

package jp.co.confrage;

import java.time.LocalDate;

import org.springframework.stereotype.Controller;
import org.springframework.validation.BindingResult;
import org.springframework.validation.annotation.Validated;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.servlet.ModelAndView;
@Controller
public class DemoController {
  @RequestMapping(value = "/index",method = RequestMethod.GET)
  public ModelAndView index(DemoForm form, ModelAndView mv) {
    form.setInDate(LocalDate.now());
    mv.addObject("sampleForm", form);// フォーム内容をマッピングする
    mv.setViewName("sample001");// src/main/resources/templates/sample001.htmlに遷移する
    return mv;
  }

  @RequestMapping(value = "/confirm",method = RequestMethod.POST)
  public ModelAndView confirm(@Validated DemoForm form,BindingResult result, ModelAndView mv) {
    if (result.hasErrors()) {
      return index(form, mv);
    }
    return mv;
  }
}

フォーム

入力部品はyyyy-MM-dd形式の日付だけにしました。

package jp.co.confrage;

import java.io.Serializable;
import java.time.LocalDate;

import javax.validation.constraints.NotNull;

import org.springframework.format.annotation.DateTimeFormat;

import lombok.Data;

@Data
public class DemoForm implements Serializable{
  private static final long serialVersionUID = -4230749597623724534L;
  @NotNull
  @DateTimeFormat(pattern = "uuuu-MM-dd")
  private LocalDate inDate;
}

notNullチェックのチェックをしています。

@DateTimeFormatで表示形式を指定しています。

sample001.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8" />
<title>demo</title>
</head>
<body>
  <form role="form" th:action="@{/confirm}" th:object="${demoForm}" method="post">
  <div class="form-group">
    <label class="control-label" for="inputDate">処理年月</label>
    <input type="text" class="form-control" id="inputDate" name="inDate" th:field="*{inDate}" />
    <span th:if="${#fields.hasErrors('inDate')}" th:errors="*{inDate}" class="help-block">error!</span>
  </div>
  <button type="submit" class="btn btn-default">実行</button>
  </form>
</body>
</html>

一応nullのチェックだけは確認できました。