バリデーションとフォームヘルパー (4/5)
作成:2013-11-16 10:27
更新:2013-11-16 10:33
更新:2013-11-16 10:33
■<g:form>タグによるフォームの作成
モデルとコントローラーが準備できたら、残るはビューですね。下のリスト欄にcreate.gspのソースコードを掲載しておきましたので、まずはこれを見てください。
今回はGSPに用意されている「フォームヘルパー」を利用してフォームを作成しています。<g:form>というタグがその部分です。これは以下のような形で記述します。
非常に簡単ですね。今回は、その中に<g:field>というタグを使って入力フィールドを表示させています。各コントローラー類のタグについてはこの後で説明しますが、基本的にはHTMLタグをそのまま<g:○○>という形にしたものと考えてよいでしょう。
また、今回のサンプルではvalue属性にデフォルトで表示する値を設定してありますが、これは例えば以下のような形になっています。
これは、sampledataがあれば、そのnameを使う、という意味です。もしsampledataが渡されなかったとしても、こうすることでエラーにはならずに済みます。覚えておくと便利でしょう。
フォーム関連以外のもう１つのポイントは、エラーメッセージの表示です。ここでは以下のようにしてエラーメッセージを表示しています。
ドメインクラスでは、入力値に問題があるとインスタンス自身の中にその情報を保管するのです。このbeanでドメインクラスのインスタンスを渡せば、その中に保管されているエラーメッセージを勝手に表示してくれます。非常に重宝しますね！
今回はGSPに用意されている「フォームヘルパー」を利用してフォームを作成しています。<g:form>というタグがその部分です。これは以下のような形で記述します。
<g:form controller="コントローラー名"
action="アクション名">
……フォームの内容……
</g:form>
非常に簡単ですね。今回は、その中に<g:field>というタグを使って入力フィールドを表示させています。各コントローラー類のタグについてはこの後で説明しますが、基本的にはHTMLタグをそのまま<g:○○>という形にしたものと考えてよいでしょう。
また、今回のサンプルではvalue属性にデフォルトで表示する値を設定してありますが、これは例えば以下のような形になっています。
<g:textField name="name" value="${sampledata?.name}"/>sampledataは、コントローラーから渡される変数でしたね。この中のnameの値をvalueに設定している、というのはわかるでしょう。が、よく見ると、sampledata.nameではなくて、sampledata?.nameになっています。これは、sampledataがあれば、そのnameを使う、という意味です。もしsampledataが渡されなかったとしても、こうすることでエラーにはならずに済みます。覚えておくと便利でしょう。
■エラーメッセージの表示について
フォーム関連以外のもう１つのポイントは、エラーメッセージの表示です。ここでは以下のようにしてエラーメッセージを表示しています。
<g:hasErrors><g:hasErrors>タグは、もしエラーがあったら実行するというタグです。エラー専門のif文みたいなものと考えればいいでしょう。その中にある<g:renderErrors>タグがエラーメッセージを表示している部分です。これはbeanという属性が用意されています。
<g:renderErrors bean="${sampledata}" />
</g:hasErrors>
ドメインクラスでは、入力値に問題があるとインスタンス自身の中にその情報を保管するのです。このbeanでドメインクラスのインスタンスを渡せば、その中に保管されているエラーメッセージを勝手に表示してくれます。非常に重宝しますね！
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
※create.gspの内容
<!DOCTYPE html>
<html>
<head>
<meta name="layout" content="mylayout" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Grails Hello</title>
</head>
<body>
<h1>${title}</h1>
<h2>${msg}</h2>
<g:hasErrors>
<g:renderErrors bean="${sampledata}" />
</g:hasErrors>
<g:form controller="SampleData" action="create">
<table>
<tr><td>名前:</td><td><g:textField name="name" value="${sampledata?.name}"/></td></tr>
<tr><td>メール:</td><td><g:textField name="mail" value="${sampledata?.mail}" /></td></tr>
<tr><td>年齢:</td><td><g:textField name="age" value="${sampledata?.age}" /></td></tr>
<tr><td></td><td><g:actionSubmit value="send" action="create" /></td></tr>
</table>
</g:form>
</body>
</html>
※関連コンテンツ