§カスタムフィールドコンストラクタ

フィールドのレンダリングは<input>タグだけでなく、<label>や、CSSフレームワークがフィールドを装飾するために使用する可能性のある他のタグも必要です。

すべての入力ヘルパーは、この部分を処理する暗黙的なFieldConstructorを受け取ります。デフォルトのもの（スコープ内に他のフィールドコンストラクタがない場合に使用されます）は、次のようなHTMLを生成します。

<dl class="error" id="username_field">
    <dt><label for="username">Username:</label></dt>
    <dd><input type="text" name="username" id="username" value=""></dd>
    <dd class="error">This field is required!</dd>
    <dd class="error">Another error</dd>
    <dd class="info">Required</dd>
    <dd class="info">Another constraint</dd>
</dl>

このデフォルトのフィールドコンストラクタは、入力ヘルパーの引数で渡すことができる追加のオプションをサポートしています。

'_label -> "Custom label"
'_id -> "idForTheTopDlElement"
'_help -> "Custom help"
'_showConstraints -> false
'_error -> "Force an error"
'_showErrors -> false

§独自のフィールドコンストラクタを作成する

多くの場合、独自のフィールドコンストラクタを作成する必要があります。まず、次のようなテンプレートを作成します。

@(elements: helper.FieldElements)

<div class="@if(elements.hasErrors) {error}">
    <label for="@elements.id">@elements.label</label>
    <div class="input">
        @elements.input
        <span class="errors">@elements.errors.mkString(", ")</span>
        <span class="help">@elements.infos.mkString(", ")</span>
    </div>
</div>

注: これは単なるサンプルです。必要に応じて複雑にすることができます。また、@elements.fieldを使用して元のフィールドにアクセスすることもできます。

次に、このテンプレート関数を使用してFieldConstructorを作成します。

object MyHelpers {
  import views.html.helper.FieldConstructor
  implicit val myFields: FieldConstructor = FieldConstructor(html.myFieldConstructorTemplate.f)
}

フォームヘルパーで使用するには、テンプレートにインポートするだけです。

@import MyHelpers._

@helper.inputText(myForm("username"))

すると、入力テキストのレンダリングに独自のフィールドコンストラクタが使用されます。

FieldConstructorの暗黙的な値をインラインで設定することもできます。

@implicitField: FieldConstructor = @{ helper.FieldConstructor(myFieldConstructorTemplate.f) }

@helper.inputText(myForm("username"))

次へ: JSONの操作

このドキュメントにエラーを見つけましたか？このページのソースコードはこちらにあります。ドキュメントのガイドラインを読んだ後、お気軽にプルリクエストを送信してください。質問やアドバイスがありますか？コミュニティフォーラムでコミュニティとの会話を始めてください。