从小枝Symfony 2中“重复”字段的自定义渲染

问题描述:

我刚开始使用Twig,并试图构建注册表单。要添加密码/重新输入密码字段,我使用“重复”文件类型:从小枝Symfony 2中“重复”字段的自定义渲染

->add('password', 'repeated', array(
    'type' => 'password', 
    'invalid_message' => 'Passwords have to be equal.', 
    'first_name'  => 'Password', 
    'second_name'  => 'Re-enter password', 
)); 

它按预期工作。然而,我有问题,我想添加一些自定义类等等,我的形式。所以我的模板看起来像这样:

<form action="{{ path('register') }}" method="post" {{ form_enctype(form) }}> 
    {{ form_errors(form) }} 
    {{ form_errors(form.username) }} 
    <div class="form-field"> 
     {{ form_label(form.username, null, { 'attr': {'class': 'form-label'} }) }} 
     {{ form_widget(form.username, { 'attr': {'class': 'form-input'} }) }} 
    </div> 
    {{ form_errors(form.email) }} 
    <div class="form-field"> 
     {{ form_label(form.email, null, { 'attr': {'class': 'form-label'} }) }} 
     {{ form_widget(form.email, { 'attr': {'class': 'form-input'} }) }} 
    </div> 
    {{ form_errors(form.password) }} 
    <div class="form-field"> 
     {{ form_label(form.password, null, { 'attr': {'class': 'form-label'} }) }} 
     {{ form_widget(form.password, { 'attr': {'class': 'form-input'} }) }} 
    </div> 

    {{ form_rest(form) }} 

    <input type="submit" class="contact-submit" /> 
</form> 

这适用于除密码部分以外的所有内容。我想在这里单独呈现两个字段,现在他们都只是呈现在同一个div中。

我该如何解决这个问题?有没有办法在Twig中选择独立的字段?或者我只是做错了什么,因为我首先遇到了这个问题。

+0

这里是你的问题的答案(使用Symfony 2.2): http:// *。com/a/16119798/2056878 – Sherlock

+0

以下是您正在寻找的答案(使用Symfony 2.2):http://*.com/a/16119798/2056878 – Sherlock

经过随机猜测我解决了我自己的问题。我会在这里发布,以便其他人谁可能通过搜索来这个问题,也知道了答案:

{% for passwordField in form.password %} 
    <div class="form-field"> 
     {{ form_label(passwordField, null, { 'attr': {'class': 'form-label'} }) }} 
     {{ form_widget(passwordField, { 'attr': {'class': 'form-input'} }) }} 
    </div> 
{% endfor %} 
+4

太棒了。谢谢你回来并回答你自己的问题! – Nick

如果你想拥有广泛的应用类的标签和输入,您可以自定义标签和部件如何渲染。检查http://symfony.com/doc/current/cookbook/form/form_customization.html

如果你看一下这个文件:

vendor/symfony/src/Symfony/Bridge/Twig/Resources/views/Form/form_div_layout.html.twig 

你可以看到默认的所有部件。要明确你所需要的实现,你可以覆盖generic_label块添加表单标签类:

{% block generic_label %} 
{% spaceless %} 
    {% if required %} 
     {# We add form-label class in the next line! #} 
     {% set attr = attr|merge({'class': attr.class|default('') ~ ' required form-label'}) %} 
    {% endif %} 
    <label{% for attrname,attrvalue in attr %} {{attrname}}="{{attrvalue}}"{% endfor %}>{{ label|trans }}</label> 
{% endspaceless %} 
{% endblock %} 

而且widget_attributes块添加表单输入类:

{% block widget_attributes %} 
{% spaceless %} 
    {# We add form-input class in the next line! #} 
    {% set attr = attr|merge({'class': attr.class|default('') ~ ' form-input'}) %} 
    id="{{ id }}" name="{{ full_name }}"{% if read_only %} disabled="disabled"{% endif %}{% if required %} required="required"{% endif %}{% if max_length %} maxlength="{{ max_length }}"{% endif %}{% if pattern %} pattern="{{ pattern }}"{% endif %} 
    {% for attrname,attrvalue in attr %}{{attrname}}="{{attrvalue}}" {% endfor %} 
{% endspaceless %} 
{% endblock widget_attributes %} 

有了这两个模板,所有的投入应该使用您需要的类进行渲染,而不必在整个表单中重复“attr”参数。

我还没有尝试过,但这应该照顾重复的现场问题。即使没有,您也可以创建一个repeat_widget和/或repeated_row模板来定制重复的小部件呈现的方式,从而修复所有使用它的表单。

如果你想从你的树枝模板重复的方法单独两个密码字段,你只需要调用回他们各自的名字,如:

{{ form_label(form.password.pass, "Password :") }} 
{{ form_widget(form.password.pass) }} 

{{ form_label(form.password.confirm, "Confirm :") }} 
{{ form_widget(form.password.confirm) }} 

当然在你的函数:

/.. 
->add('password', 'repeated', array(
'first_name' => 'pass', 
'second_name' => 'confirm', 
'type' => 'password' 
)) 

此致敬礼。

这个工作对我来说:

.... 
{{ form_errors(form.password.first) }} 
<div class="form-field"> 
    {{ form_label(form.password.first, null, { 'attr': {'class': 'form-label'} }) }} 
    {{ form_widget(form.password.first, { 'attr': {'class': 'form-input'} }) }} 
</div> 

{{ form_errors(form.password.second) }} 
<div class="form-field"> 
    {{ form_label(form.password.second, null, { 'attr': {'class': 'form-label'} }) }} 
    {{ form_widget(form.password.second, { 'attr': {'class': 'form-input'} }) }} 
</div> 
.... 

如果您正在使用用户捆绑他们使用的password.first和password.second,甚至更好的请尝试使用Profiler来看看来自哪个变量从视图和控制器; )