1

我正在尝试使用 Symfony 和Braincrafted Bootstrap模块创建基于 Twitter Bootstrap 的水平表单。我已经从文档中复制了示例但是我的表单没有正确呈现

在此处输入图像描述

我的代码如下

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 指令被添加到表单的类列表中）。

我错过了什么？

4

3 回答 3

1

对于最高 v1.4的braincrafted-bootstrap，从树枝内使任何形式水平，

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

"form-type" 告诉 BC_Bootstrap 为您添加控制组，然后 attr: class: 告诉 bootstrap css 应用水平样式。您需要同时应用这两个。

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

于 2013-11-05T03:58:14.873 回答
1

如“表单主题”部分的入门指南中所述，我必须手动配置 Symfony 以使用 Braincrafted 表单模板。不幸的是，它没有自动工作。

twig:
    form:
        resources:
            - "BraincraftedBootstrapBundle:Form:form_div_layout.html.twig"
于 2013-08-12T13:13:29.510 回答
0

您必须将标签和控件包装在.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>
于 2013-07-28T03:39:15.933 回答