Question

我正在尝试使用Symfony和Braincrafted Bootstrap模块创建基于Twitter Bootstrap的水平表单。我复制了example from the docs，但我的表单无法正确呈现

enter image description here

我的代码如下

class MyController extends Controller {
  /**
   * @Route("/")
   * @Method("GET")
   * @Template
   */
  public function someAction() {
    $form = $this->createForm(new HorizontalFormType());

    return array("horizontalForm" => $form->createView());
  }
}

本课程取自文档：

class HorizontalFormType extends AbstractType {
  public function buildForm(FormBuilderInterface $builder, array $options) {
    $builder->add('email', 'text', array(
      'label' => 'Email',
      'attr' => array('placeholder' => 'Email')
    ));

    $builder->add('password', 'password', array(
      'label' => 'Password',
      'attr' => array('placeholder' => 'Password')
    ));

    $builder->add('checkbox', 'checkbox', array('label' => 'Remember me'));
  }

  public function getName() {
    return 'horizontal_form';
  }
}

模板代码也被复制

<form class="form-horizontal">
  <legend>Legend</legend>
  {{ form_widget(horizontalForm, {'form_type': 'horizontal'}) }}
  <div class="control-group">
    <div class="controls">
      <button type="submit" class="btn">Sign in</button>
    </div>
  </div>
</form>

表单生成的HTML是

<form class="form-horizontal ng-pristine ng-valid">
  <legend>Legend</legend>
  <div id="horizontal_form">
    <div>
      <label class="required" for="horizontal_form_email">Email</label>
      <input type="text" placeholder="Email" required="required" name="horizontal_form[email]" id="horizontal_form_email">
    </div>
    <div>
      <label class="required" for="horizontal_form_password">Password</label>
      <input type="password" placeholder="Password" required="required" name="horizontal_form[password]" id="horizontal_form_password">
    </div>
    <div>
      <label class="required" for="horizontal_form_checkbox">Remember me</label><input type="checkbox" value="1" required="required" name="horizontal_form[checkbox]" id="horizontal_form_checkbox">
    </div>

    <input type="hidden" value="fea7c498a01aebd814baf4a9f57df4b6e3646195" name="horizontal_form[_token]" id="horizontal_form__token">
  </div>
  <div class="control-group">
    <div class="controls">
      <button class="btn" type="submit">Sign in</button>
    </div>
  </div>
</form>

注意我也在我的项目中使用AngularJS（因此为什么ng指令被添加到表单的类列表中）。

我错过了什么？

Answer 1

如“表单主题”部分的the Getting Started guide中所述，我必须手动配置Symfony以使用Braincrafted表单模板。不幸的是，它并没有自动运作。

twig:
    form:
        resources:
            - "BraincraftedBootstrapBundle:Form:form_div_layout.html.twig"

Answer 2

对于braincrafted-bootstrap最高v1.4，要在树枝内横向制作任何形式，

{{ form(form, {'form_type': 'horizontal', 'attr': {'class': 'form-horizontal'}}) }}

“form-type”告诉BC_Bootstrap为你添加控制组，attr：class：然后告诉bootstrap css应用水平样式。您需要同时应用这两种方法。

这意味着您不需要扩展任何水平formTypes，也不需要将表单分成小部件等来设置类。只需在上面的树枝中应用form_type和class。

Answer 3

您必须在.control-group中换行标签和控件所有标签必须包含类.control-label。输入字段必须使用div class="controls"包装。 html输出应该是这样的

<form class="bs-docs-example form-horizontal">
   <legend>Legend</legend>
   <div id="horizontal_form">
     <div class="control-group">
       <label for="horizontal_form_email" class="required control-label">Email</label>
       <div class="controls">
        <input type="text" id="horizontal_form_email" name="horizontal_form[email]" required="required" placeholder="Email">
       </div>
     </div>
     <div class="control-group">
       <label for="horizontal_form_password" class="required control-label">Password</label>
       <div class="controls">
       <input type="password" id="horizontal_form_password" name="horizontal_form[password]" required="required" placeholder="Password">
       </div>
    </div>
    <div class="control-group">
    <div class="controls">
       <label for="horizontal_form_checkbox" class="checkbox required">
       <input type="checkbox" id="horizontal_form_checkbox" name="horizontal_form[checkbox]" required="required" value="1"> Remember me
       </label>
    </div>
</div>
<input type="hidden" id="horizontal_form__token" name="horizontal_form[_token]" value="def76ca43f623d0a4ad8145e39f33907b7e9e0a1"></div>
<div class="control-group">
    <div class="controls">
       <button type="submit" class="btn">Sign in</button>
    </div>
</div>
</form>

使用Braincrafted Bootstrap创建水平表单

3 个答案: