I try to make a registration form in Symfony 3.4 but it makes me mad that I cannot place errors properly.
This is how I render the form itself:
{{ form_start(registrationForm) }}
{{ form_widget(registrationForm) }}
{{ form_end(registrationForm) }}
And the fields are rendered from a custom template, where I declare that errors should appear under the field:
{% block form_row %}
<div class="form-group">
{{ block('form_label') }}
{{ block('form_widget_simple') }}
{{ block('form_error') }}
</div>
{% endblock %}
However all my errors are appearing above the whole form as li elements in an ul element. I tried to add 'error_bubbling' => false but it won't make any difference. (The error messages come form the Assert annotations on the underlying model object.)
What am I doing wrong?
Related
I have a form with a collection and I can see it properly when I use the following syntax:
form_row(form.items)
Then when I try to render it by myself, it is duplicated.
Here is my code in my twig file:
{{ form_errors(form) }}
{{ form_start(form) }}
... some fields here ...
<div id="{{ form.items.vars.id }}" class="collection items" data-prototype="{{ form_widget(form.items.vars.prototype)|e }}">
<h3>{{ form_label(form.items) }}</h3>
Add
{% for item in form.items %}
{{ form_row(item) }}
{% endfor %}
</div>
... some other fields here ...
{{ form_end(form) }}
Here is my code in my form object:
$builder->add('items', 'collection', array(
'type' => new ItemType(),
'allow_add' => true,
'allow_delete' => true,
'by_reference' => false,
'required' => true,
));
Add here is my output:
<!-- This is the one I need, I removed the prototype for the sake of clarity -->
<div id="bundle_data_items" class="collection items" data-prototype="...">
<h3>
<label class="required">Items</label>
</h3>
Add
</div>
<!-- This one is automatically added. The prototype is empty -->
<div>
<label class="required">Items</label>
<div id="bundle_data_items" data-prototype=""></div>
</div>
Do you have any ideas why this happens?
I followed that documentation. Did I miss something?
Edit:
This happens only when my collection is empty
I found the solution to that.
It turns out that when the collection is empty, the rendering of it never occurs. I could use sjagr solution but as there is some fields I want to render automatically, I cannot use it.
So my solution is the following:
{{ form_errors(form) }}
{{ form_start(form) }}
... some fields here ...
<div id="{{ form.items.vars.id }}" class="collection items" data-prototype="{{ form_widget(form.items.vars.prototype)|e }}">
<h3>{{ form_label(form.items) }}</h3>
Add
{% for item in form.items %}
{{ form_row(item) }}
{% else %}
{% do form.items.setRendered %}
{% endfor %}
</div>
... some other fields here ...
{{ form_end(form) }}
When your collection is empty, the for loop in {% for item in form.items %} never gets to execute, hence form_row(item) never happens. This means, to Twig/Symfony, you never actually outputted the field.
Then you do form_end at the end of the form. This is not usually a big deal, but from the docs:
This helper also outputs form_rest() unless you set render_rest to false
So, you must simply pass a false value for render_rest:
{{ form_end(form, {'render_rest': false}) }}
I'm not sure how form_widget did fix your problem, but I'm also not sure how you tried that alternative - perhaps you ran it outside of the for loop.
As an aside, you should consider making your own form.html.twig template file so you can reuse the markup format you've chosen for your collection. It will allow you to simply do form_widget(...) without having to break apart the pieces and your form_end will always consider the field to be outputted even if the collection is empty.
Unfortunately i cannot comment yet (no 50 rep), but perhaps this is caused the browser itself. A rendering issue due to markup someplace? See if the raw http response has the same thing. Since it works with form_row(form.items) but not your own, it "could be" that.
I would check if it's empty also before outputting it.
Similar thing happened to me, label of CollectionType was rendering twice when Collection is empty, but it was rendering once when there are data.
This is my configuration:
$builder->add('items', CollectionType::class, [
'entry_type' => NumberType::class,
'required' => true,
'label' => 'Fields',
'entry_options' => [
'label' => false,
],
'prototype' => true,
])
and in Twig I was displaying Collection label in this way:
{{ form_label(form.items) }} and rendering field widgets in somewhere else. In this case label was displayed twice, once where this code is placed, and the other at the end of form.
Solution is to change it to:
{{ form_row(form.items) }}
or if you need custom rendering for form widgets like in my case, following code will print only labels:
{% if 0 < (form.items|length) %}
{{ form_label(form.items) }}
{% else %}
{{ form_row(form.items) }}
{% endif %}
I am trying to create a form with sub-fields with symfony2.
In twig I render the form as
{{ form_start(form) }}
{{ form_errors(form) }}
<div>
{{ form_label(form) }}
{{ form_errors(form) }}
{% for field in form %}
{{ form_widget(field) }}
{% endfor %}
</div>
{{ form_end(form) }}
However, I want to add some customization depending on the field I am rendering.
What I want to achieve is something like this:
{{ form_start(form) }}
{{ form_errors(form) }}
<div>
{{ form_label(form) }}
{{ form_errors(form) }}
{% for field in form %}
{% if field.label == "myvalue" %} <-- this code is not working
{# do something here #}
{{ form_widget(field) }}
{% endif %}
{% endfor %}
</div>
{{ form_end(form) }}
I am not able to access the label of each of my sub-fields in twig.
I think it is possible with something like
{{ field.vars.something }}
, but I did not manage to find any clear documentation about this.
Can someone please help?
Thank you!
Edit:
I actually found the answer to my question:
It was indeed just
{{ field.vars.label }}
and
{% if field.vars.label == "myvalue" %}
{# do something here #}
{{ form_widget(field) }}
{% endif %}
did the trick.
However, I am still looking for some good documentation about this "vars" attribute in twig, and what can be retrieved with it.
Thanks!
You'll find more information at http://symfony.com/doc/current/reference/forms/twig_reference.html#more-about-form-variables
On that page you'll find a list of common form vars. You might also create custom vars by implementing the buildView method of a FormType. You can read an example at http://symfony.com/doc/current/cookbook/form/create_form_type_extension.html#adding-the-extension-business-logic
Hope it'll help
when I follow this tutorial: http://symfony.com/doc/current/cookbook/form/form_collections.html
and I render the
<ul class="tags" data-prototype="{{ form_widget(form.tags.vars.prototype)|e }}">
...
</ul>
the prototype stay empty if I put it after the {{ form(form)}} but gets filled If I put it i before the {{ form(form) }} tag. any one an idea why this is and how to solve it.
thanks
The tag {{ form(form) }} is supposed to output all your form, so there is nothing to output after this tag.
If the tag {{ form(form) }} does not output the prototype, then it was not configured right in the form type class.
But if you chose to output prototype by using form_widget, you should not use form(form) and should output the form by parts:
{{ form_start(form) }}
{{ form_errors(form) }}
<div>
{{ form_row(form.another_form_property) }}
</div>
<div>
<ul class="tags" data-prototype="{{ form_widget(form.tags.vars.prototype)|e }}">
...
</ul>
</div>
{{ form_end(form) }}
I'm quite new to symfony2, i have managed to implement fosUserBundle and Braincrafted bootstrap bundle.
I am trying to style the registration form to use boot strap and the inputs with input-sm class
the username and email are displaying as input-sm but the 2 password fields refuse to resize to the class i have applied.
is there somewhere in the fosUserbundle where the password field widget is configured
{% trans_default_domain 'FOSUserBundle' %}
{{ form_start(form, { 'style': 'horizontal', 'col_size': 'xs', 'label_col': 5, 'widget_col': 7, attr: {class: 'pull-left'}}) }}
{{ form_row(form.username, { attr: {class: 'input-sm'}}) }}
{{ form_row(form.email, { attr: {class: 'input-sm'}}) }}
{{ form_row(form.plainPassword, { attr: {class: 'input-sm'}}) }}
{{ form_row(form.plainPassword.second, { attr: {class: 'input-sm'}}) }}
<div class="col-sm-5"></div>
<div class="col-sm-7">
<input class="btn-primary btn-sm" type="submit" value="{{ 'registration.submit'|trans }}" />
</div>
{{ form_rest(form) }}
{{ form_end(form) }}
FosUserBundle or not, you can overwrite Twig form rendering directly to achieve this, have a look at How to customize form rendering in SF cookbook.
Basically you can either get more precise in your template by splitting form_row into labels, widgets and errors to target the input ("form_widget" below) more specifically and apply the correct classes :
{{ form_errors(form.plainPassword) }}
{{ form_label(form.plainPassword) }}
{{ form_widget(form.plainPassword) }}
You can also generate your own form style for desired type of input by decalring it directly in your template :
{% form_theme form _self %}
{% block integer_widget %}
<div class="integer_widget">
// Your custom layout
</div>
{% endblock %}
{% Block body %}
// Rendering your form, your custom layout will be used.
{% endblock %}
You can also declare it in a separate template if you want to use it somewhere else, refer to the above cookbook page to see how.
Here's the main form layout twig file:
https://github.com/symfony/symfony/blob/master/src/Symfony/Bridge/Twig/Resources/views/Form/form_div_layout.html.twig
An example:
{% block form_widget_simple %}
{% spaceless %}
{% set type = type|default('text') %}
<input type="{{ type }}" {{ block('widget_attributes') }} {% if value is not empty %}value="{{ value }}" {% endif %}/>
{% endspaceless %}
{% endblock form_widget_simple %}
I wonder where varaibles like "type" or "value" come from?
The goal I'm trying to achieve is to set form row's label as a placeholder in the widget. How can I accomplish this?
Details how to override Template for Form field you will find here.
If you trying to change labels to placeholders all you need is to change way of rendering your forms. Remove form_widget(form) and switch to render every separate form field:
{# ... #}
<div class="form-group">
{{ form_errors(form.email) }}
{{ form_widget(form.email, {'attr': {'class': 'form-control', 'placeholder': 'E-mail address'|trans }}) }}
</div>
{# ... #}
This example generate input for email field and html/css classes for bootstrap.
And shows you how {{ type }} and {{ value }} are passed - by attr array.
Good Luck!