まとめ
Thymeleafにはオブジェクトのフィールド値が使える選択変数式:*{…}があるが
th:text="*{…}"
th:error="*{…}"
この2つの"*{…}"
は右辺だけ見ると同じ内容を指していると思うが、左辺によって全く違う内容を指している。
th:textはオブジェクトのフィールドに入っている値が表示され
th:errorはオブジェクトのフィールドに対してValidateしたエラー内容が表示される。
何に混乱したのか
thymeleafでコントローラの@Validationを使った入力値チェックを表示する方法を探したところ、ビュー側でth:error="*{…}"を使えば、…で指定したフィールドのチェック結果を表示できる事を知る。しかし、"*{…}"だけを見るとオブジェクトのフィールドの値を表示している式と読み取れる。コントローラー側でフィールドにエラーを代入している式も見つからず、なぜこれで表示できるのか分からなかった。
調べて分かった事
Thymeleafの公式ページや、ネットで調べても明記されている分が見つからなかったため、ChatGPTに聞いてみる事に。得られた回答が次の内容です。
th:text="*{...}"
とth:error="*{...}"
は Thymeleaf テンプレート内で使用される異なる属性であり、出力される値は通常異なります。これらの属性は異なる目的を持ちます。
th:text="*{...}"
:
この属性は、指定された変数の値を表示するために使用されます。バリデーションエラーの有無に関係なく、指定された変数の値が表示されます。
th:error="*{...}"
:
この属性は、バリデーションエラーがある場合に、指定された変数に関連するエラーメッセージを表示するのに使用されます。バリデーションエラーの有無に依存してエラーメッセージが表示されます。バリデーションエラーがない場合、何も表示されません。したがって、出力される値は通常異なります。
th:text="*{...}"
は指定された変数の値を表示し、th:error="*{...}"
はバリデーションエラーメッセージを表示します。どちらの属性も異なる目的に使用されます。
どうもth:textの"{...}"とth:errorの"{...}"は違い内容らしい
確認用のコード
//~~省略~~
@Size(max = 5)
private String name;
//~~省略~~
上記のようなnameフィールドを作成した。
5を超える名前を入力すると、エラー内容が表示されるはずである。
確認のために出力用のhtmlは次のようにしてみた。
<!-- ~~省略~~ -->
<form th:object="${form}" 省略>
<!-- ~~省略~~ -->
<p th:text="*{name}">名前</p>
<p th:text="${form.name}">名前</p>
<p th:errors="*{name}"></p>
<p th:errors="${form.name}"></p>
<!-- ~~省略~~ -->
実行結果
テキスト欄にあいうえおかきくけこ
と入力した出力結果が次の内容です
あいうえおかきくけこ
あいうえおかきくけこ
[名前] 5文字を超えています。
[名前] 5文字を超えています。
これより、th:text
の*{...}
と、th:errors
の*{...}
は違う結果が表示されており左辺の式によって出力される結果が変わることを確認できた。
また、*
を使用しない${form.name}
でも同じ結果になる事も確認できた。
参考
本記事では説明を全て省きましたが、@Validateを使った入力チェックと、結果の表示については、下記サイトがとても分かりやすく記載されていたので備忘録もかねて共有します。