【Spring】入力フォームを実装する（入力画面⇒確認画面⇒完了画面）

はじめに

やりたいこと

• ユーザがフォームに入力した値をもとに何かしたい。
• 入力画面⇒確認画面⇒完了画面、と遷移させたい。

この記事が参考になる人

• お問い合わせフォームを実装する人など。
• Java, Spring, Thymeleafの知識が最低限ある人。

使った技術要素

• Java
• Spring
  • フレームワーク
• Thymeleaf
  • テンプレートエンジン
• lombok
  • getter, setterを自動生成してくれる

実装

好みもあるかと思いますが、以下の手順で実装していくといいと思います。
最低限のスニペットのみ掲載します。

入力画面

HTML

input.html

<blc:form  th:action="@{/input}" method="POST" name="hogeForm" th:object="${hogeForm}">
    <p>問い合わせカテゴリー</p>
    <select name="category" th:field="*{category}">
        <option value="">---</option>
        <option th:each="item : *{getCategoryList()}" th:value="${item.key}" th:text="${item.value}"/>
    </select>
    <p th:if="${#fields.hasErrors('category')}" th:errors="*{category}">エラーメッセージ</p>

    <p>問い合わせ内容</p>
    <textarea name="content" placeholder="お問合せ内容を入力してください。" th:field="*{content}"></textarea>
    <p th:if="${#fields.hasErrors('content')}" th:errors="*{content}">エラーメッセージ</p>

    <input type="submit" value="確認"/>
</blc:form>

Formオブジェクト

HogeForm.java

@Getter
@Setter
public class HogeForm implements Serializable {
    @NotBlank(message="選択してね")
    private String category;

    @NotBlank(message="何か入力してね")
    @Length(max=1000)
    private String content;

    public Map<String, String> getCategoryList() {
    Map<String, String> categoryMap = new LinkedHashMap<String, String>();
        categoryMap.put("1", "カテゴリー１");
        categoryMap.put("2", "カテゴリー２");
        categoryMap.put("3", "カテゴリー３");
        return categoryMap;
    }
}

ポイント

• プロパティ名とformのname属性は同じ変数名を使う。
• getCategoryList()でセレクトボックスの内容はFormで保持しておく。順番に表示したいから LinkedHashMapを使う。 HTML側での表示方法は以下の通り。

<option th:each="item : *{getCategoryList()}" th:value="${item.key}" th:text="${item.value}"/>

• Validationでエラーになった時、
  • HTML側にて#fields.hasErrors('(プロパティ名)') が trueになる。
  • @(Validationタイプ)(message="～～～")とプロパティにmessageを指定しておくと、HTML側でth:errors="*{(プロパティ名)}"と記述すれば、指定したmessageを表示することができる。

Controller

HogeController.java

@RequestMapping("/input")
public ModelAndView input(
        @ModelAttribute("hogeForm") HogeForm hogeContactForm,
        Model model, HttpServletRequest request) {

    return "index.html";
}

@RequestMapping(value = "/input", method = RequestMethod.POST)
public ModelAndView input(
        @Valid @ModelAttribute("hogeForm") HogeForm hogeForm,
        BindingResult bindingResult,
        Model model, HttpServletRequest request) {

    // エラーがある場合、自画面遷移する
    if (bindingResult.hasErrors()) {
        return "index.html";
    }

    HttpSession session = request.getSession();
    session.setAttribute("hogeForm", hogeForm);
    return "redirect:/confirm";
}

ポイント

• formのPOST先を確認画面（/confirm）にするのではなく、それ用に2つ目のinputメソッドを作成する。
  • メリット：/confirm のメソッドが確認画面の表示に専念できる。
  • POST先を/confirmにしてしまうと、confirmメソッド内で入力画面用の処理と確認画面用の処理の2つを実装しなくてはならなくなってしまう。
  • 上記はシンプル例だからそんなにメリットを感じられないが、実業務だとコードがすっきりしていい感じになる。

確認画面

HTML

confirm.html

<blc:form  th:action="@{/complete}" method="POST" name="hogeForm" th:object="${hogeForm}">
    <p>問い合わせカテゴリー</p>
    <p th:text="*{getCategoryList().get('__*{category}__')}">カテゴリー１</p>

    <p>問い合わせ内容</p>
    <p th:text="*{content}">ここに問合せ内容を表示</p>

    <div>
        <input type="hidden" name="category" th:value="*{category}" />
        <input type="hidden" name="content" th:value="*{content}" />
        <input type="submit" value="送信" />
    </div>
</blc:form>

ポイント

• *{getCategoryList().get('__*{category}__')}でMapのvalueを表示できる。普通に*{category}だけだとkeyの方が表示される。

Controller

HogeController.java

@RequestMapping("/confirm")
public ModelAndView confirm(
        Model model, HttpServletRequest request) {

    HttpSession session = request.getSession();
    HogeForm hogeForm = (HogeForm) session.getAttribute("hogeForm");
    model.addAttribute("hogeForm", hogeForm);
    return "confirm.html";
}

完了画面

HTML

complete.html

<p>以下の内容で受け付けました。</p>

<p>問い合わせカテゴリー</p>
<p th:text="*{getCategoryList().get('__*{category}__')}">カテゴリー１</p>

<p>問い合わせ内容</p>
<p th:text="*{content}">ここに問合せ内容を表示</p>
</blc:form>

Controller

HogeController.java

@RequestMapping("/complete")
public ModelAndView complete(
        @ModelAttribute("hogeForm") HogeForm hogeContactForm,
        Model model, HttpServletRequest request) {

    model.addAttribute("hogeForm", hogeForm);
    return "complete.html";
}

感想

2年ぶりくらいにformの実装をしたからすごいつまづきながらの実装だった。。