Springで複数フォームを1ページに配置する方法！ModelAttribute名とバインディングのポイント解説

1ページ複数フォームの戦略：ModelAttribute名とバインディングの整理

先生と生徒の会話形式で理解しよう

生徒

「Spring MVCで、1ページに複数のフォームを置く場合って、どうやってデータをバインドすればいいんですか？」

先生

「いい視点ですね。複数フォームを同じページに配置する場合、それぞれに@ModelAttributeを割り当てて、フォーム送信時に正しくバインディングされるよう工夫が必要です。」

生徒

「@ModelAttributeの名前を変えれば良いって聞いたんですけど、具体的な使い方がよくわからなくて……」

先生

「それじゃあ、複数フォーム戦略の基本から実装方法まで、順を追って説明していきましょう！」

1. 1ページ複数フォームの設計が必要になる場面とは？

Spring MVCで、1つのHTMLページ内に複数の異なるフォームを表示したいケースは意外とよくあります。たとえば「プロフィール更新フォーム」と「パスワード変更フォーム」を同じ画面に出すときなどです。

このような場面では、それぞれのフォームに異なるModelAttributeを割り当てて、コントローラ側で別々にバインド処理を行う必要があります。

2. 複数フォームを使うときの`@ModelAttribute`の役割

2. 複数フォームを使うときの<code>@ModelAttribute</code>の役割

2. 複数フォームを使うときの@ModelAttributeの役割

Spring MVCでは、@ModelAttributeで指定した名前を使って、ビュー（HTML）とコントローラでデータの橋渡しをします。フォームを複数設置する場合、@ModelAttributeの名前が重複すると、バインディング時にどのフォームのデータなのか曖昧になります。

そこで、各フォームには個別の@ModelAttribute名を付けて、バインディングの衝突を防ぎます。

将来を見据えて、＋αのスキルを身につけたい方へ

JavaやLinuxを学んでいても、「このままで市場価値は上がるのか」「キャリアの選択肢を広げたい」と感じる方は少なくありません。

AIを学ぶならアイデミープレミアム

3. HTML側でのフォーム記述とname属性の指定

フォームのth:objectには、それぞれ異なるModelAttribute名を指定しましょう。以下のように書き分けます。


<form th:action="@{/profile/update}" th:object="${profileForm}" method="post">
    <input type="text" th:field="*{name}" />
    <input type="email" th:field="*{email}" />
    <button type="submit">プロフィール更新</button>
</form>

<form th:action="@{/password/change}" th:object="${passwordForm}" method="post">
    <input type="password" th:field="*{currentPassword}" />
    <input type="password" th:field="*{newPassword}" />
    <button type="submit">パスワード変更</button>
</form>

このように、フォームごとにth:objectの属性が異なっていれば、各入力項目のバインディング先が明確になります。

4. コントローラー側でのバインディング処理

コントローラーでも、それぞれのフォームに対応する@ModelAttribute名を明示的に指定することで、意図しないデータの混在を防げます。


@Controller
public class AccountController {

    @GetMapping("/account/settings")
    public String showSettings(Model model) {
        model.addAttribute("profileForm", new ProfileForm());
        model.addAttribute("passwordForm", new PasswordForm());
        return "account/settings";
    }

    @PostMapping("/profile/update")
    public String updateProfile(@ModelAttribute("profileForm") ProfileForm profileForm, BindingResult result) {
        if (result.hasErrors()) {
            return "account/settings";
        }
        // 更新処理
        return "redirect:/account/settings?success";
    }

    @PostMapping("/password/change")
    public String changePassword(@ModelAttribute("passwordForm") PasswordForm passwordForm, BindingResult result) {
        if (result.hasErrors()) {
            return "account/settings";
        }
        // パスワード変更処理
        return "redirect:/account/settings?changed";
    }
}

ここでは、profileFormとpasswordFormがそれぞれ別の処理にバインドされるため、フォームの送信先が混在しないようになっています。

5. バリデーションを個別に実装する方法

それぞれのフォームクラスに@Validatedや@Validアノテーションを使えば、フォームごとに別々のバリデーションルールを適用可能です。


@PostMapping("/profile/update")
public String updateProfile(@Validated @ModelAttribute("profileForm") ProfileForm profileForm, BindingResult result) {
    if (result.hasErrors()) {
        return "account/settings";
    }
    // 更新処理
    return "redirect:/account/settings?success";
}

BindingResultの位置には注意が必要で、@ModelAttributeの直後に書かなければ例外が発生します。

6. エラーメッセージの表示方法も分ける

それぞれのフォームにエラーを表示したい場合も、バインド対象の名前を分けておくことで、個別のエラーブロックを出し分けできます。


<form th:object="${profileForm}">
    <div th:if="${#fields.hasErrors('*')}" class="alert alert-danger">
        <ul>
            <li th:each="err : ${#fields.errors('*')}" th:text="${err}"></li>
        </ul>
    </div>
</form>

このように、複数のModelAttributeを使う設計は、入力の分離やバリデーション、エラー表示の柔軟性につながります。