文件

§自訂欄位建構函式

欄位呈現不僅包含 <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

在此文件當中發現錯誤？此頁面的原始程式碼可以在 這裡 找到。在閱讀 文件指南 之後，請隨時提交拉取請求。有問題或建議要分享？前往 我們的社群論壇 與社群展開對話。