親バカエンジニアのナレッジ帳

webのエンジニアをやっており、日頃の開発で詰まったことや書き残しておきたいことを載せています。育児のイロハという育児サイト(https://ikujip.jp)の開発も行っているため、その開発で使用されている技術についても掲載しています。

Thymeleafでth:valueが空になる!?

HTMLタグの中でJavaの変数を使う

Spring BootでThymeleafを使う時、HTMLのタグの中に「th:〜」という書き方でJavaの変数を使うことができます。

例えば以下のようにすれば、

<input type="text" th:field="*{フィールド名}" />

inputタグのid、name、valueの全てを管理することができ、以下のHTMLタグが発行されます。
(valueは初期値なので空です)

<input type="text" id="フィールド名" name="フィールド名" value="" />

th:valueの落とし穴

ただ、場合によってはinputタグのvalueにDBから取得した値を入れたい時がありますよね。
そんな時はth:valueに値を入れればいいのですが、ここに落とし穴が。。。
th:fieldやth:nameに値を入れているとvalueの中が空になるのです。

なので、以下ではだめなのです。

<input type="text" th:field="*{フィールド名}" th:value="${変数名}" />

ちなみに以下もダメです。

<input type="text" th:name="*{フィールド名}" th:value="${変数名}" />

どうやって解決する?

th:valueに値を入れる時はth:nameではなく、nameに値を入れましょう。

<input type="text" name="フィールド名" th:value="${変数名}" />

こうすればnameにもvalueにも値が入ります。

Spring Boot in Action

Spring Boot in Action