Question

经过一次非常新的订阅，我决定在这里寻求帮助，这是我过去为我的问题找到了很多解决方案的地方。

我刚刚完成了Openclassrooms课程（演变为专业的PHP架构），提供了从Silex，Twig和Bootstrap开始的关键，并在制作网站时阅读Silex的文档。

但在所有这个开发中，我决定使用FormBuilderInterface并在表单中添加文件输入：

class ActivityType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('title', 'text')
            ->add('public', 'choice', array(
                'choices' => array(
                    'children' => 'children',
                    'adults' => 'adults',
                    'family' => 'family',
                    ),
                ))
            ->add('withHorses', 'choice', array(
                'expanded' => 'true',
                'label' => 'With horses',
                ))
            ->add('content', 'textarea')
            ->add('image', 'file', array(
                'required' => 'false',
                'data_class' => null,
                ));
    }

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

data_class =＆gt; null可以避免异常。

以下是观点：

{{ form_start(activityForm, { 'attr': {'class': 'form-horizontal'} }) }}
    <div class="form-group">
        {{ form_label(activityForm.title, null, { 'label_attr':  {
            'class': 'col-sm-4 control-label'
        }}) }}
        <div class="col-sm-6">
            {{ form_errors(activityForm.title) }}
            {{ form_widget(activityForm.title, { 'attr':  {
                'class': 'form-control'
            }}) }}
        </div>
    </div>
    <div class="form-group">
        {{ form_label(activityForm.public, null, { 'label_attr':  {
            'class': 'col-sm-4 control-label'
        }}) }}
        <div class="col-sm-6">
            {{ form_errors(activityForm.public) }}
            {{ form_widget(activityForm.public, { 'attr':  {
                'class': 'form-control'
            }}) }}
        </div>
    </div>
    <div class="form-group">
        {{ form_label(activityForm.withHorses, null, { 'label_attr':  {
            'class': 'col-sm-4 control-label'
        }}) }}
        <div class="col-sm-6">
            {{ form_errors(activityForm.withHorses) }}
            {{ form_widget(activityForm.withHorses, { 'attr':  {
                'class': 'form-control'
            }}) }}
        </div>
    </div>
    <div class="form-group">
        {{ form_label(activityForm.content, null, { 'label_attr':  {
            'class': 'col-sm-4 control-label'
        }}) }}
        <div class="col-sm-6">
            {{ form_errors(activityForm.content) }}
            {{ form_widget(activityForm.content, { 'attr':  {
                'class': 'form-control',
                'rows': '8'
            }}) }}
        </div>
    </div>
    <div class="form-group">
        {{ form_label(activityForm.image, null, { 'label_attr':  {
            'class': 'col-sm-4 control-label'
        }}) }}
        <div class="col-sm-6">
            {{ form_errors(activityForm.image) }}
            {{ form_widget(activityForm.image, { 'attr':  {
                'class': 'form-control',
                'accept': 'image/*'
            }}) }}
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-4 col-sm-3">
            <input type="submit" class="btn btn-primary" value="Save" />
        </div>
    </div>
{{ form_end(activityForm) }}

显示文件输入，但here就是它的样子。

在检查DOM时，我发现了一些奇怪的事情here。包含文件输入的div不具有class "form-group“，并且我还认为未从视图（class: form-control和accept：images / *）添加到输入的属性考虑到了。

我花了几个小时在文档上做了一些谷歌研究而没有结果。我承认我在完全理解Silex时遇到了一些困难，我对这种情况感到困惑。我希望这个文件输入通常位于文本区域和提交按钮之间，标签和文件输入也要水平对齐，并且表单的这一部分考虑了视图中的代码（类和属性）。

此外，如果有人在data_class上有信息，我会非常感兴趣（特别是为什么它必须为null才能避免在使用该接口时出现文件输入异常）。

提前致谢！

Answer 1

如果我是你，我会使用BraincraftedBootstrap：https://mrgierer.wordpress.com/2014/02/16/bootstrap-themed-forms-with-silex/

它会做你正在做的一切，但它有效：）

Answer 2

没关系！

虫子在椅子和桌子后面！我向您展示的表单从一开始就是正确的，我只是误解了文件并且看错了。哦，对于想要重用我的代码的人：小心，因为withHorses应该是一个复选框。

所以你需要改变：

add('withHorses', 'choice', array( 'expanded' => 'true', 'label' => 'With horses', ))

进入：

add('withHorses', 'checkbox', array( 'label' => 'With horses', ))

info here

Thegeekrv，使用FormBuilderInterface，我在bootstrap风格中得到了一个很好的视图，所以我不认为我真的需要BraincraftedBootstrap。但是，文件输入的样式并不好，所以我选择使用bootstrap-filestyle。 This is what it looks like, here.

非常感谢你的帮助和纠正！

使用FormBuilderInterface输入Silex文件

2 个答案: