另一种方法是在一个 scala 对象(不同的文件)中创建多个字段,然后在您的视图中导入这个对象。其余的将很容易理解。
首先:为您要构建的字段创建一个视图。我们称之为 textinputgroup.scala.html
它将包含此代码
@(elements: helper.FieldElements, text: String)
<div class="form-group input-group if(@elements.hasErrors) {error}">
<span class="input-group-addon">@text</span>
@elements.input
<span class="errors">@elements.errors.mkString(", ")</span>
</div>
然后:创建您的对象助手。我们称它为 bootstrap.scala 并在其中放入您要创建的字段。(你可以将 bootstrap.scala 和 textinput.scala.html 放在 'views' 目录下的同一个文件夹中)
package views
import views.html.helper._
object bootstrap {
implicit val addressinputgroup = new FieldConstructor {
def apply(elements: FieldElements) = textinputgroup(elements, "@")
}
implicit val passwordinputgroup = new FieldConstructor {
def apply(elements: FieldElements) = textinputgroup(elements, "*")
}
}
最后:在您的视图中导入并使用此对象。
@(signin: Form[forms.Signin]) /* Insert here your real form definition */
@import helper._
@import views.bootstrap._
/* Inside the body */
@helper.form(action = routes.Auth.submit()) {
@inputText(signin("email"), 'class -> "form-control", 'placeholder -> "Email")(addressinputgroup, implicitly[Lang])
@inputPassword(signin("password"), 'class -> "form-control", 'placeholder -> "Password")(passwordinputgroup, implicitly[Lang])
<button class="btn btn-default" type="submit">Sign Up »</button>
}
我在此存储库中制作了更多示例,以使用 Bootstrap (multipleFieldConstructor) 和 Semantic-UI (semanticuiformhelper) 框架创建多个字段。去看一下。