Question

Symfony关于“自定义表单呈现”的文档似乎含糊不清且具有误导性。我试图在表单上呈现自定义元素，但是在尝试这样做时我看到了莫名其妙的行为。

问题：

我希望渲染一个多列选择框。这里准确描述了功能等价物： jQuery Get Selected Option From Dropdown

上下文

模型 - 我有一个用户实体。用户可以属于零个，一个或多个组织。
控制器 - 我的控制器进行API调用，该调用将提取用户和组织（如果该用户所属的组织）以及用户可以添加的组织列表。
查看 - 我正在渲染一个创建/编辑表单Twig模板，显示所有用户字段以及用户可以订阅的组织列表。并排有两个选择框。一个显示用户可以属于的组织，另一个显示用户可能添加的组织列表：

<select "user_orgs">
  <option value="1">Organization 1</option>
</select>
<button id="add"> << </button>
<button id="remove"> << </button>
<select "available_orgs">
  <option value="1">Organization 1</option>
  <option value="2">Organization 1</option>
</select>

我正在使用“bootstrap3_form_horizontal.html.twig模板进行表单渲染。为了捕获上述功能，我需要提供一种方法来将上述html的变体添加到我的表单中。

解决方案1 

向Twig扩展添加一个方法，该方法可以从表单中调用并呈现html。

（正面）最简单，最有效
（负面）不使用树枝。鸭子类型需要形式值。
（负面）不是很干。

对于所有解决方案，我创建了一个AbstractType，为表单呈现提供控件：

//Predefined form types:
use Symfony\Component\Form\Extension\Core\Type;

class UserType extends AbstractType {

    public function buildForm(FormBuilderInterface $builder, array $options) {
        $builder->add( 'email', Type\EmailType::class, [
                'label' => 'Email / Username',
            ])
            . . .
            ->add('organizations', Type\ChoiceType::class, [
                'label' => 'Organizations',
                'selections' => $options['organizations'],
                'multiple' => true,

            ])
            ->add('submit', Type\SubmitType::class, [
                'attr' => ['class' => 'btn-success btn-outline'],
            ]);
    }
}

user_create.html.twig：

{% form_theme form _self %}
{% block body %}
    {{ form_start(form) }}
    {{ form_errors(form) }}
    {{ form_row(form.email) }}
    {{ multi_select(form.organizations, selected_organizations)|raw }}
    {{ form_end(form) }}
{% endblock %}

“multi select”是一个自定义的Twig扩展名：

class CustomTwigExtension extends \Twig_Extension {
public function getFunctions() {
        return array(
            new \Twig_SimpleFunction('multi_select', [$this, 'multiSelect']), 
    }

public function multiSelect(\Symfony\Component\Form\FormView $formView, $selections) {
        $formData   = $formView->vars;
        $formLabel  = $formData['label'];
        $selectName = $formData['full_name'];
        $formId     = $formData['id'];
        $optionsId  = $formId . '_options';
        $rhsOptions = "";
        $lhsOptions = "";

        foreach($selections as $key => $value) {
            $lhsOptions .= '<option value="' . $value . ' selected">' . $key . '</option>';
        }
        foreach($formData['choices'] as $option) {
            $rhsOptions .= '<option value="' . $option->value . ' selected">' . $option->label . '</option>';
        }

        $html = <<<HTML
<div class="form-group">
    <label class="col-sm-2 control-label required" for="$formId">$formLabel</label>
    <div class="col-sm-2">
        <select id="$formId" class="form-control" name="$selectName" multiple>
            $lhsOptions
        </select>
    </div>
    <div class="col-sm-1" style="width: 4%;">
        <button class="btn btn-default" id="m-select-to">&laquo;</button>
        <br />&nbsp;<br />
        <button class="btn btn-default" id="m-select-from">&raquo;</button>
    </div>
    <div class="col-sm-2">
        <select id="$optionsId" class="form-control" multiple>
            $rhsOptions
        </select>
    </div>
</div>
HTML;
        return $html;
    }

不是很优雅，但它会产生理想的效果。（我将HEREDOC html包含在我的最终结果中更准确）。

问题是，“form_start”Twig方法还除了上面的控件之外还呈现了一个组织选择框 - 我已经指示它通过设置“ChoiceType”来实现用户的抽象类型。

表格大致类似于：（相关部分由评论括起来）

<form name="user" method="post" action="/admin/users/save/" class="form-horizontal">
  <!-- THIS IS THE CUSTOM GENERATED CONTROL -->
  <div class="form-group">
    <label class="col-sm-2 control-label required" for="user_organizations">Organizations</label>
    <div class="col-sm-2">
        <select id="user_organizations" class="form-control" name="user[organizations][]" multiple="">
      </select>
    </div>
    <!-- END CUSTOM GENERATED CONTROL -->
    <div class="col-sm-1" style="width: 4%;">
        <button class="btn btn-default" id="m-select-to">«</button>
        <br>&nbsp;<br>
        <button class="btn btn-default" id="m-select-from">»</button>
    </div>
    <div class="col-sm-2">
        <select id="user_organizations_options" class="form-control" multiple="">
            <option value="1 selected">Organization1</option>
            <option value="2 selected">Organization2</option>
        </select>
    </div>
</div>
            <div class="form-group">
              <label class="col-sm-2 control-label required" for="user_email">Email / Username</label>
              <div class="col-sm-10">
                <input id="user_email" name="user[email]" required="required" class="form-control" type="email">
              </div>
              <!-- THIS IS THE SYMFONY GENERATED CONTROL -->
              <div class="form-group">
                <label class="col-sm-2 control-label required" for="user_organizations">Organizations</label>
                <div class="col-sm-10">
                  <select id="user_organizations" name="user[organizations][]" class="form-control" multiple="multiple">
                  <option value="1 selected">Organization1</option>
                  <option value="2 selected">Organization2</option>
                  </select>
                </div>
              </div>
              <!-- END SYMFONY GENERATED CONTROL -->
  </div><input id="user__token" name="user[_token]" value="imatoken" type="hidden"></form>

如您所见，有两种不同的事情正在发生。一个通用的“开箱即用”选择标记和我自定义的标记。

form_start方法似乎是在迭代UserType的子节点并渲染它们的控件以及我指定的控件。

解决方案2

创建自定义模板以控制表单的呈现。

（肯定）遵循记录的最佳实践以实现我的结果
（否定）未完整记录。不起作用。

遵循http://symfony.com/doc/current/form/form_customization.html中列出的程序并在SO帖子中澄清： How to create a custom Symfony2 Twig form template block 以及： Custom form field template with twig

我做了以下事情：

创建一个要从自定义模板呈现的自定义类型（来自Symfony docs链接）：

自定义类型：的appbundle \表格\ MultiSelectType：

class MultiSelectType extends AbstractType {

    public function buildView(FormView $view, FormInterface $form, array $options) {
        $view->vars['selections'] = $this->setOptions($options['selections']);
        //The following lines will assign the select box containing
        //already defined organizations. 
        $entity = $view->parent->vars['value'];
        $field = $options['entity_field_name'];
        $method = 'get' . $field;
        $values = call_user_func(array($entity, $method));
        $view->vars['choices'] = $values;
    }

    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults(array(
            'selections' => array(),
            'custom_label' => 'slapping juice'
        ));
    }

    private function setOptions($options) {
        $ar = [];
        foreach($options as $k => $v) {
            $ar[] = ['value' => $v, 'label' => $k];
        }
        return $ar;
    }
}

我真的不知道在这里指定什么。我会覆盖哪些方法以及如何？ Symfony文档敦促您查看类似的实例。选择类型类 800行！我需要800多行PHP来呈现20个HTML吗？！

我在我的UserType中引用它：

class UserType extends AbstractType {

    public function buildForm(FormBuilderInterface $builder, array $options) {
      . . . 
      $builder->add('organizations', MultiSelectType::class, [
                'label' => 'Organizations',
                'selections' => $options['organizations'],
                'entity_field_name' => 'organizations',

            ])
     . . .
     }
}

在我的Twig扩展中，我添加了一个引用（由于在上面链接的Symfony文档中没有提到这个，所以我会添加一个引用。）

类CBMSHelperExtension extends \ Twig_Extension {

public function getFunctions() {
    return array(
        new \Twig_SimpleFunction('multiselect_widget', null, [
            'node_class' => 'Symfony\Bridge\Twig\Node\RenderBlockNode',
            'is_safe' => [ 'html' ]])
    );
}

Aaaaand Finaly，我的近乎完整的自定义模板，按照指示复制现有的枝条模板：

资源/视图/形式/ fields.html.twig

{% use "form_div_layout.html.twig" %}
{% use  "bootstrap_3_horizontal_layout.html.twig" %}

{% block multi_select_widget %}
    {% spaceless %}
        <div class="form-group">
            {{ form_label(form) }}
            <div class="{{ block('form_group_class') }}">
                <select {{ block('widget_attributes') }} multiple="multiple">
                    {%- set options = selections -%}
                    {%  for choice in options %}
                        <option value="{{ choice.value }}" selected="selected">{{ choice.label }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="{{ block('form_group_class') }}">
                {% for organization in choices %}
                    <p>{{ organization.name }}</p>
                {% endfor %}
            </div>
        </div>
    {% endspaceless %}
{%  endblock %}

（以上内容已添加到config.yml）

现在的问题与上面的问题类似。

有一个额外的“组织”标签正在呈现!!我会为你节省html转储，但基本上它正在做的是：

|| form tag ||
| form group:           |
| label - email         | input box for email   |
| form group:           |
| label - organizations | form group            |
|                       | label - organizations |
|                       | custom template       |

尝试来渲染组织，即使我正竭尽全力告诉它不要这样做。

以下是实际应用程序的屏幕截图，演示了这一点：

问题

如何实现自定义表单呈现，以便在Symfony的“最佳实践”之后使用HTML呈现自定义表单模板，而不会产生冲突，或创建不可扩展的解决方案？

奖金问题：是不是只是我或正在Symfony开发，比如试图建立一个Rube Goldberg设备？

Answer 1

我无法回答为什么要呈现额外内容的原因。从基础Twig模板form_div_layout.html.twig开始，没有任何内容表明正在发生的行为：

{%- block form_start -%}
    {% set method = method|upper %}
    {%- if method in ["GET", "POST"] -%}
        {% set form_method = method %}
    {%- else -%}
        {% set form_method = "POST" %}
    {%- endif -%}
    <form name="{{ name }}" method="{{ form_method|lower }}"{% if action != '' %} action="{{ action }}"{% endif %}{% for attrname, attrvalue in attr %} {{ attrname }}="{{ attrvalue }}"{% endfor %}{% if multipart %} enctype="multipart/form-data"{% endif %}>
    {%- if form_method != method -%}
        <input type="hidden" name="_method" value="{{ method }}" />
    {%- endif -%}
{%- endblock form_start -%}

在渲染中有些东西变得混乱。但是，通过删除此块，将仅呈现指定的表单元素（所有form_row和form_errors块）。

那么为什么不扩展解决方案1并为form_start和form end方法添加覆盖？

class MyTwigExtension extends \Twig_Extension {

    public function getFunctions() {
        return array(
            new \Twig_SimpleFunction('custom_form_start', [$this, 'customFormStart']),
            new \Twig_SimpleFunction('custom_form_end', [$this, 'customFormEnd']),
            new \Twig_SimpleFunction('multi_select', [$this, 'multiSelect']),
            new \Twig_SimpleFunction('multi_select_js', [$this, 'multiSelectJS'])
        );
    }
 . . .
public function customFormStart(\Symfony\Component\Form\FormView $formView) {
    $formData = $formView->vars;

    $html = '<form name="' . $formData['name'] . '" method="' . $formData['method'] . '"'
        . ' action="' . $formData['action'] . '" class="form-horizontal">';
    return $html;
}
public function customFormEnd(\Symfony\Component\Form\FormView $formView) {
    $formData = $formView->vars;
    $token = $formView->children['_token']->vars;
    $html = '<input id="' . $token['id'] .'" name="' . $token['full_name']
        . '" value="' . $token['value'] . '" type="hidden">';
    return $html;
}

}

这将生成提交表单所需的其余元素。应该与Symfony生成的应该没什么不同。

这可能不会填写所有可扩展性和最佳实践等的复选框，但它会将数据返回给控制器。

奖励问题：不，开发Symfony并不像创建一个Rube Goldberg装置。这更像是建造一架飞机。。。它在空中。

Symfony 3覆盖默认表单呈现

1 个答案: