HTML动态生成表单,html – 如何为动态生成的内容编写自定义表单助手模板？

我有一些测验系统,用户可以通过单选按钮显示问题和几个答案选项.

但是当我使用一个通过列表填充的inputRadioGroup的帮助器时,它看起来不再漂亮了(比如Twitter Bootstrap). radiobuttons是内联的,而它们应该在彼此之下.实际上我想将图标更改为更漂亮的按钮.

这就是它当下的样子：

因此我尝试编写自己的自定义表单助手,但一直卡住.我觉得很难理解这个文档：

https://www.playframework.com/documentation/2.3.x/JavaFormHelpers

首先,我创建了一个名为myFieldConstructorTemplate.scala.html的新模板

@(elements: helper.FieldElements)

@elements.label

@elements.input

@elements.errors.mkString(",")

@elements.infos.mkString(",")

将其保存到/ views-folder.然后尝试在我的视图类quiz.scala.html中使用它：

@import helper._

@import helper.twitterBootstrap._

@(questionList: List[Question],answerList: List[Answer],answerRadioForm: Form[Answer])

@helper.form(action = routes.Application.nextQuizPage(),'id -> "answerRadioForm"){

@helper.inputRadioGroup(

answerRadioForm("Answer"),options = answerList.map(answer => answer.answerID.toString -> answer.answerText),'_label -> "Answer",'_error -> answerRadioForm("answerID").error.map(_.withMessage("select answer")))

Next Question

}

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

@inputText(answerRadioForm("questionID"))

如果我把它放到我的模板中,我得到一个not found：value implicitField-error.

那么我怎么能设法将我的无线电按钮的外观改为底部并看起来像Twitter Bootstrap？

[EDIT1]：我已将导入的顺序更改为建议的版本：

@(questionList: List[Question],answerRadioForm: Form[Answer])

@import helper._

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

@import helper.twitterBootstrap._

我得到了这个错误：

ambiguous implicit values:

both method implicitField of type => views.html.helper.FieldConstructor

and value twitterBootstrapField in package twitterBootstrap of type

=> views.html.helper.FieldConstructor match expected type

views.html.helper.FieldConstructor

我认为这与我将答案导入radiobuttons的方式有关？

[EDIT2]：

现在进口的顺序是：

@(questionList: List[Question],answerRadioForm: Form[Answer])

@import models.Question

@import models.Answer

@import helper._

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

有了这个,该程序编译.但是无线电按钮看起来仍然一样.所以我试图改变设计,这不太合适.现在看起来所有的radiobutton都融化成一个：

这是我的模板类myFieldConstructorTemplate.scala.html：

@(elements: helper.FieldElements)

@elements.label

@elements.input

@elements.errors.mkString(",")

[编辑方面3]：我已经根据to the last answer改变了我的班级,但仍然将无线电按钮融合在一起.所以我想指出我并不关注使用inputRadioGroup from the playframework helper,如果有另一个解决方案工作原理相同并且看起来几乎像bootstrap,我很乐意使用它.似乎改变助手并不容易/直观.我感谢任何形式的帮助！