Spring Boot+Thymeleaf 画面から入力された二次元配列の情報をフォームで受け取りたい

Question

前提・実現したいこと

いつもお世話になっております。
Spring Boot+Thymeleafで画面から入力されたリストの情報をフォームで受け取りたいです。
正確にはリストの中にあるリスト（二次元配列）の情報を受け取りたいです。

Springにおいて画面のリスト状になっている情報をコントローラーで取得したいを参照して、リストになっている情報をコントローラーで受け取る処理の実装を試みましたがうまく値が渡らず、formから受け取る値がnullになってしまいます。
これは、リストの中にリストがない場合なので、リストの中にリストがある書き方に躓いてしまいました。

前回質問した、SpringBoot フォームで複数レコードの値を受け取れないでは、リストの0番目の情報がすべての番号に反映されて更新されるだけの処理でした。

イメージ画像は以下の通りです。送信ボタンを押されると、一気にレコードが更新されるイメージです。

今回リストで更新したいのは、期中・期末の目標ウエイト(goalWeight)のみです。
目標番号のリストの中にウェイトのリストが入っていて、その値をformに送信します。

表示自体はできるのですが、javaに値がどうしても渡りません。
Thymeleafの書き方がおかしいのだと思います。
ご教授お願いします。

発生している問題・エラーメッセージ

Formからリストの値が受け取れない

該当のソースコード

GoalSeqForm.java

package jp.co.itc.mbo.form;

import java.util.List;

import javax.persistence.OneToMany;

import jp.co.itc.mbo.entity.Meisai;

public class GoalSeqForm {

	private String goaltitle;
	private Integer year;
	private String goaldetail;

	@OneToMany(mappedBy = "goalseqid")
	private List<Meisai> meisaiList;


	public String getGoaltitle() {
		return goaltitle;
	}
	public void setGoaltitle(String goaltitle) {
		this.goaltitle = goaltitle;
	}
	public Integer getYear() {
		return year;
	}
	public void setYear(Integer year) {
		this.year = year;
	}
	public String getGoaldetail() {
		return goaldetail;
	}
	public void setGoaldetail(String goaldetail) {
		this.goaldetail = goaldetail;
	}

	public List<Meisai> getMeisaiList() {
		return meisaiList;
	}
	public void setMeisaiList(List<Meisai> meisaiList) {
		this.meisaiList = meisaiList;
	}



}

MeisaiForm.java

package jp.co.itc.mbo.form;

import java.util.List;

import javax.persistence.JoinColumn;
import javax.persistence.ManyToOne;

import jp.co.itc.mbo.entity.GoalSeq;

public class MeisaiForm {

	private Boolean target;
	private List <Integer> goalWeight;
	private Integer evalution;
	private String selfComment;
	private String bossComment;
	private Integer reviewCheck;
	private Integer status;
	private Double score;

	@ManyToOne(targetEntity = GoalSeq.class)
	 @JoinColumn( name = "goalseq_id")
	 private GoalSeq goalseqid;

	public Boolean getTarget() {
		return target;
	}

	public void setTarget(Boolean target) {
		this.target = target;
	}

	public List<Integer> getGoalWeight() {
		return goalWeight;
	}

	public void setGoalWeight(List<Integer> goalWeight) {
		this.goalWeight = goalWeight;
	}

	public Integer getEvalution() {
		return evalution;
	}

	public void setEvalution(Integer evalution) {
		this.evalution = evalution;
	}

	public String getSelfComment() {
		return selfComment;
	}

	public void setSelfComment(String selfComment) {
		this.selfComment = selfComment;
	}

	public String getBossComment() {
		return bossComment;
	}

	public void setBossComment(String bossComment) {
		this.bossComment = bossComment;
	}

	public Integer getReviewCheck() {
		return reviewCheck;
	}

	public void setReviewCheck(Integer reviewCheck) {
		this.reviewCheck = reviewCheck;
	}

	public Integer getStatus() {
		return status;
	}

	public void setStatus(Integer status) {
		this.status = status;
	}

	public Double getScore() {
		return score;
	}

	public void setScore(Double score) {
		this.score = score;
	}

	public GoalSeq getGoalseqid() {
		return goalseqid;
	}

	public void setGoalseqid(GoalSeq goalseqid) {
		this.goalseqid = goalseqid;
	}


}

Controller

	@RequestMapping(value = "{id}/weight_input")
	String weightInput(@PathVariable Integer id,Model model) {
		List<GoalSeq> goalseqs = goalseqservice.findCurrent(id);
		model.addAttribute("goalseqs", goalseqs);
		return "goals/weight_input";}

	@RequestMapping(value = "/weight_complete/{id}", method = RequestMethod.POST)
	String weightRegist(@PathVariable Integer id,@Valid GoalSeqForm goalseqform, Principal principal,BindingResult bindingResult) {
		if (bindingResult.hasErrors()) {
		//処理未記述
		}
		//↓ここでヌルポ
		GoalSeqForm forms=goalseqform;
		List <GoalSeq> goalseqs=goalseqservice.findCurrent(id);
		for(GoalSeq goalseq: goalseqs) {
			for (int i = 0; i <= 2; i++) {
        //処理は未記述ですがここで、フォームから受け取った値を更新する記述をします
		}
		}
		return  "redirect:/{id}";
	}

weight_input.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<form method="post"
		th:action="@{/weight_complete/}+${goalseqs[0].userid.id}"
		th:object="${meisaiForm}">
		<table>
			<tr>
				<th>目標番号</th>
				<th>期中ウエイト</th>
				<th>期末ウエイト</th>
				<th></th>
			</tr>
			<tr th:each="goalseq,st: ${goalseqs}">
				<td><p th:text="${goalseq.goalid}"></p></td>
				<td><input type=number name="meisaiList[1].goalWeight"
					th:name="'MeisaiList[' +${st.index} +'].[1].goalWeight'"
					th:value="${goalseq.meisaiList[1].goalWeight}"></td>
				<td><input type=number name="meisaiList[2].goalWeight"
					th:name="'MeisaiList[' +${st.index}+ '].[2].goalWeight'"
					th:value="${goalseq.meisaiList[2].goalWeight}"></td>
			</tr>
		</table>
		<button type=submit>送信</button>
	</form>
</body>
</html>

試したこと

・GoalSeqでeachを回すのではなく、Meisaiで回したらフォームに値が渡りました
→この方法で解決しましたがこの解決方法は、Springにおいて画面のリスト状になっている情報をコントローラーで取得したいと同じになってしまうので質問を残してあります。

補足情報（FW/ツールのバージョンなど）

FormクラスのGoalSeqのレコード1つに対して、MeisaiのレコードはmeisaiListとして3つOneToManyで紐づいています。

目標1つに対して、外部テーブルで期初、期中、期末のステータスを紐づけています。
期初にあたるmeisaiListの0番目は更新する必要がないので、nameのところでは、
期中を「meisaiList[1].goalWeight」
期末を「meisaiList[2].goalWeight」
と表記しています。

初心者で至らない点があると思いますがよろしくお願いします。

Comments

[rubytomato]

3点確認させてください。

1) weightInputメソッドで取得する下記のリストのデータが2件あると、イメージ画像のようにフォームに2件表示されるということでしょうか？（5件あればフォーム上も5行というように）
List<GoalSeq> goalseqs = goalseqservice.findCurrent(id);

2) イメージ画像中にある目標番号というのは、2つあるフォームのどちらの、何という名前のフィールドで受け取るのでしょうか？

3) フォームクラスで@ManyToOneや@OneToManyというアノテーションを利用されていますが、これは何を期待して付けているのでしょうか？（付けないとどんなエラーが起きますか？）

[chocolate_pie]

rubytomato様
コメントありがとうございます。
質問の回答をさせていただきます。

1)その通りです。件数の数だけ行が表示されます。

2)目標番号は、GoalSeq（GoalSeqFormのエンティティ）の、goalidというフィールドです。こちらは値を更新しない表示のみです。混乱してしまうので、input タグ→pタグに変更します。

3)GoalSeqForm1件に対してMeisaiFormは3件紐づいているので@ManyToOneと@OneToManyを付けないと、MeisaiFormの値が取れなくなってしまいます。

Answer 1

表示自体はできるのですが、javaに値がどうしても渡りません。

送信するフォームデータを受け取れないのは、受け取るフォームクラスの実装に問題があるようです。

1)その通りです。件数の数だけ行が表示されます。

1つのフォーム内に複数件のGoalSeqのデータがあり、さらにGoalSeqは複数件のMeisaiListを持つという、テーブル状のフォームデータを送信する方法について、下記のサンプルコードで動作確認しました。

複数件のGoalSeqのデータが送信されるという仕様なので、フォームクラスの実装は下記のようになります。
※なおクラス名はもともとのGoalSeqFormから、より適切なGoalsFormに変えています。
※この変更でMeisaiFormは不要になります。

public class GoalsForm {

  private String goaltitle;
  private Integer year;
  private String goaldetail;

  // ここはGoalSeqのコレクション
  private List<GoalSeq> goalseqs;

  // getter/setterは省略

}

この修正により、コントローラも以下のように修正します。所々動作確認用のコードが入っていますのでご留意ください。

@GetMapping(value = "/weight_input/{id}")
String weightInput(@PathVariable Integer id, @ModelAttribute GoalsForm goalsForm, Model model) {
  // 確認用コード
  model.addAttribute("userid", id);

  // 確認用コード
  goalsForm.setGoaltitle("test");
  goalsForm.setYear(2020);
  goalsForm.setGoaldetail("test detail");

  List<GoalSeq> goalseqs = goalseqservice.findCurrent(id);

  // 取得したGoalSeqのコレクションをフォームにセット
  goalsForm.setGoalseqs(goalseqs);

  return "goals/weight_input";
}


@PostMapping(value = "/weight_complete/{id}")
String weightRegist(@PathVariable Integer id, @Valid @ModelAttribute GoalsForm goalsForm) {
  // 確認用コード
  System.out.println("GoalSeqForm#goaltitle: " + goalsForm.getGoaltitle());

  List <GoalSeq> goalseqs = =goalseqservice.findCurrent(id);

  // フォームからGolaSeqのコレクションが渡される
  // 確認用コード
  for (GoalSeq goalseq : goalsForm.getGoalseqs()) {
    System.out.println(String.format("id:%d, goalid:%d, goalWeight[0]:%d, goalWeight[1]:%d, goalWeight[2]:%d",
        goalseq.getId(), goalseq.getGoalid(),
        goalseq.getMeisaiList().get(0).getGoalWeight(),
        goalseq.getMeisaiList().get(1).getGoalWeight(),
        goalseq.getMeisaiList().get(2).getGoalWeight()));
  }

  return "redirect:/{id}";
}

テンプレートの修正は以下の通りです。
大きな変更点はformタグのth:objectで指定するフォームをmeisaiFormからgoalsFormへ変えている点です。

<form method="post" th:action="@{/weight_complete/{userid}(userid=${userid})}" th:object="${goalsForm}">
    <input type="hidden" th:field="*{goaltitle}" />
    <input type="hidden" th:field="*{year}" />
    <input type="hidden" th:field="*{goaldetail}" />
    <table>
        <tr>
            <th>no</th>
            <th>目標番号</th>
            <th>期初ウエイト</th>
            <th>期中ウエイト</th>
            <th>期末ウエイト</th>
        </tr>
        <tr th:each="goal, st : *{goalseqs}">
            <td th:text="${st.index}">index</td>
            <td>
                <input type="hidden" th:name="|goalseqs[${st.index}].id|" th:value="${goal.id}" />
                <input type="number" th:name="|goalseqs[${st.index}].goalid|" th:value="${goal.goalid}" />
            </td>
            <td>
                <input type="number" th:name="|goalseqs[${st.index}].meisaiList[0].goalWeight|" th:value="${goal.meisaiList[0].goalWeight}" />
            </td>
            <td>
                <input type="number" th:name="|goalseqs[${st.index}].meisaiList[1].goalWeight|" th:value="${goal.meisaiList[1].goalWeight}" />
            </td>
            <td>
                <input type="number" th:name="|goalseqs[${st.index}].meisaiList[2].goalWeight|" th:value="${goal.meisaiList[2].goalWeight}" />
            </td>
        </tr>
    </table>
    <button type=submit>送信</button>
</form>

このテンプレートがレンダリングされると以下のhtmlコードになります。
※データはテスト用のダミーです。

<form method="post" action="/weight_complete/10">
    <input type="hidden" id="goaltitle" name="goaltitle" value="test">
    <input type="hidden" id="year" name="year" value="2020">
    <input type="hidden" id="goaldetail" name="goaldetail" value="test detail">
    <table>
        <tbody><tr>
            <th>no</th>
            <th>目標番号</th>
            <th>期初ウエイト</th>
            <th>期中ウエイト</th>
            <th>期末ウエイト</th>
        </tr>
        <tr>
            <td>0</td>
            <td>
                <input type="hidden" name="goalseqs[0].id" value="1">
                <input type="number" name="goalseqs[0].goalid" value="66">
            </td>
            <td>
                <input type="number" name="goalseqs[0].meisaiList[0].goalWeight" value="50">
            </td>
            <td>
                <input type="number" name="goalseqs[0].meisaiList[1].goalWeight" value="51">
            </td>
            <td>
                <input type="number" name="goalseqs[0].meisaiList[2].goalWeight" value="52">
            </td>
        </tr>
        <tr>
            <td>1</td>
            <td>
                <input type="hidden" name="goalseqs[1].id" value="2">
                <input type="number" name="goalseqs[1].goalid" value="1">
            </td>
            <td>
                <input type="number" name="goalseqs[1].meisaiList[0].goalWeight" value="60">
            </td>
            <td>
                <input type="number" name="goalseqs[1].meisaiList[1].goalWeight" value="61">
            </td>
            <td>
                <input type="number" name="goalseqs[1].meisaiList[2].goalWeight" value="62">
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>
                <input type="hidden" name="goalseqs[2].id" value="3">
                <input type="number" name="goalseqs[2].goalid" value="35">
            </td>
            <td>
                <input type="number" name="goalseqs[2].meisaiList[0].goalWeight" value="70">
            </td>
            <td>
                <input type="number" name="goalseqs[2].meisaiList[1].goalWeight" value="71">
            </td>
            <td>
                <input type="number" name="goalseqs[2].meisaiList[2].goalWeight" value="72">
            </td>
        </tr>
        <tr>
            <td>3</td>
            <td>
                <input type="hidden" name="goalseqs[3].id" value="4">
                <input type="number" name="goalseqs[3].goalid" value="8">
            </td>
            <td>
                <input type="number" name="goalseqs[3].meisaiList[0].goalWeight" value="80">
            </td>
            <td>
                <input type="number" name="goalseqs[3].meisaiList[1].goalWeight" value="85">
            </td>
            <td>
                <input type="number" name="goalseqs[3].meisaiList[2].goalWeight" value="89">
            </td>
        </tr>
    </tbody></table>
    <button type="submit">送信</button>
</form>

これで、テーブル上のフォームデータの送信と受信のサンプルコードは以上になります。

以下、補足になります。

3)GoalSeqForm1件に対してMeisaiFormは3件紐づいているので@ManyToOneと@OneToManyを付けないと、MeisaiFormの値が取れなくなってしまいます。

フォームクラスにはこれらのアノテーションは不要です。（通常フォームクラスにJPAのアノテーションはつけません）
これらのアノテーションはJPAを使ってデータベース上のテーブルとリレーションをエンティティクラスにマッピングするために使うものです。
質問したのはフォームクラスとエンティティクラスを兼ねているのかどうかが知りたかったためです。

つぎに、フォームクラスのフィールドにエンティティクラスを使用する点ですが、このサンプルコードでも以下のように実装していますが、

public class GoalsForm {

  private List<GoalSeq> goalseqs;

}

フォーム上で編集するフィールドが期中／期末ウェイトだけであれば、それ用のフィールドを定義したフォームクラスを実装することもご検討ください。
特に期初／期中／期末をインデックスで扱うのはバグにつながるかもしれません。
以下はイメージです。

public class GoalsForm {

  private String goaltitle;
  private Integer year;
  private String goaldetail;

  private List<GoalSeqDto> goalseqs;

}

public class GoalSeqDto {

  // 目標番号
  private Integer goalid;
  // 期中ウェイト
  private Integer duringOfgoalWeight;
  // 期末ウェイト
  private Integer endOfgoalWeight;

}

Comments

[chocolate_pie]

Thymeleafの書き方ではなくFormの書き方が間違っていたのですね。
また、FormにOneToMany等のアノテーションは使わないことや、インデックスで扱うとバグにつながるということを教えていただきありがとうございます。