Custom Field Constructors

一个表单域的渲染并不仅仅需要包含 <input> 标签，还有 <label> 和其他一些标签可能被你的 CSS 框架用来装饰表单域。

所有的输入 helper 都会接受一个隐式（implicit）的 FieldConstructor 来处理这一部分。默认的构造器（在作用域内没有指定其他域构造器时会被调用），生成的 HTML 类似于：

1. <dl class="error" id="username_field">
2. <dt><label for="username">Username:</label></dt>
3. <dd><input type="text" name="username" id="username" value=""></dd>
4. <dd class="error">This field is required!</dd>
5. <dd class="error">Another error</dd>
6. <dd class="info">Required</dd>
7. <dd class="info">Another constraint</dd>
8. </dl>

这个默认的域构造器支持传入额外的选项到输入 helper：

1. '_label -> "Custom label"
2. '_id -> "idForTheTopDlElement"
3. '_help -> "Custom help"
4. '_showConstraints -> false
5. '_error -> "Force an error"
6. '_showErrors -> false

自定义域构造器

通常，你需要自定义域构造器。首先要写一个模板：

1. @(elements: helper.FieldElements)

3. <div class="@if(elements.hasErrors) {error}">
4. <label for="@elements.id">@elements.label(elements.lang)</label>
5. <div class="input">
6. @elements.input
7. <span class="errors">@elements.errors(elements.lang).mkString(", ")</span>
8. <span class="help">@elements.infos(elements.lang).mkString(", ")</span>
9. </div>
10. </div>

注意： 这只是一个例子。你想要实现多复杂的功能都可以。你同样还能使用 @elements.field 来获取原始的表单域。

现在使用模板函数来创建 FieldConstructor:

1. object MyHelpers {
2. import views.html.helper.FieldConstructor
3. implicit val myFields = FieldConstructor(html.myFieldConstructorTemplate.f)
4. }

还可以让表单 helper 来调用他，只需要将其导入到你的模板中：

1. @import MyHelpers._

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

模板会使用你的域构造器来渲染输入文本。

你也可以为 FieldConstructor 设置一个隐式（implicit）的值：

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

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