symfony2 fosUserbundle input type with bootstrap - forms

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.

Related

Properly set Symfony's form error rendering position

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?

symfony2 and twig: get properties of form field

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

Symfony2 form layout - variables source

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!

multiple form in symfony2

I have a form for adding comments, and i want to know how can i multiply this form on the same page.
I tried this code but it does not work :
{% for statut in statuts %}
<div>
{{ statut.sujet }}
<form action="" method="post" {{ form_enctype(formC) }}>
{{ form_errors(formC) }}
{{ form_errors(formC.commentaire) }}
{{ form_widget(formC.commentaire) }}
<div><input type="submit" class="btn btn-info"/><div>
{{ form_rest(formC) }}
</form>
</div>
{% endfor %}
Does somebody know how to do that ? or any suggestions
You need to do this in the controller like get all statuts then run a for loop for each statuts and get comment form for each statut field store them in array and return the array.
In your twig template then run a for loop for the same.

Rendering a Form in a Twig Template with Symfony2

I have a base Twig template that has a search bar form in it at the top of the page in a Twig block. I have another block later on named "content" that my children pages fill out. Currently, my base template looks like this:
{% block admin_bar %}
<div id="search">
<form action="{{ path('search') }}" method="post" {{ form_enctype(search_form) }}>
{{ form_widget(search_form.term) }}
{{ form_widget(search_form.type) }}
{{ form_widget(search_form.pool) }}
{{ form_widget(search_form._token) }}
<input type="submit" value="Search" />
</form>
</div>
{% endblock %}
{% block content %}
{% endblock %}
However, when trying to render a child template I need to pass in the search_form variable along with it. Is there anyway (short of writing out the HTML tags myself) I can avoid having to create this search_form variable and pass it in everytime I want to render a child view? I'm using Twig in conjunction with Symfony2.
Thanks!
Embedded Controller is what you need. Put your admin_bar block into separate file:
{# src/Acme/AcmeBundle/Resources/views/Search/index.html.twig #}
<div id="search">
<form action="{{ path('search') }}" method="post" {{ form_enctype(search_form) }}>
{{ form_widget(search_form.term) }}
{{ form_widget(search_form.type) }}
{{ form_widget(search_form.pool) }}
{{ form_widget(search_form._token) }}
<input type="submit" value="Search" />
</form>
</div>
Create controller for this template:
class SearchController extends Controller
{
public function indexAction()
{
// build the search_form
return $this->render('AcmeAcmeBundle:Search:index.html.twig', array('search_form' => $searchForm));
}
}
And then embed controller into your original template:
{% block admin_bar %}
{% render "AcmeAcmeBundle:search:index" %}
{% endblock %}
{% block content %}
{% endblock %}