form_errors(form) symfony2 twig - forms

Using Symfony2.3.4 and Twig
I bet it's an easy peasy for anybody but I just can't get it done.
I'm trying to show only one error alert with always the same message, always at the beginnig of the form, everytime there are errors regardless which field contains the invalid input.
I thought I could do it like this:
//../Professor/Resources/new.html.twig
{% extends 'AdminBundle:Default:admin.html.twig' %}
{% block content -%}
<h1>New professor</h1>
{% if form_errors(form) is not null %} {#<------------------------------------#}
<div class="alert alert-error">
<i class="glyphicon-ban-circle"></i> Message.
</div>
{% endif %}
<div class="row-fluid">
<form id="prof_create" class="form-horizontal sf_admin_form_area" action="{{ path('professor_create') }}"
method="post" {{ form_enctype(form) }}>
{{ form_widget(form) }}
<div class="row-fluid">
<div class="span8"></div>
</div>
<div class="form-actions">
<button class="btn btn-primary">
<i class="icon-ok"></i> {{'Create' | trans}}</button>
<a class="btn" href="{{ path('professor') }}">
<i class="icon-ban-circle"></i> {{'Cancel' | trans }}</a>
</div>
</form>
</div>
{% endblock %}
{% if form_errors(form) is not null %} is not working, meaning:
when I show the create form for the first time before entering any data in the fields,the error alert shows although there is no data in the fields.
I also tried {% if form_errors(form) %} which is also useless but the other way around, it doesn't matter if there are or not errors, the alert just won't show.
There's obviously a lot about form_errors(form) that I don't know.
Appreciate any tips or even completely different solutions.
Thanks

Have you try this ?
{% if form_errors(form.content) is not empty %}

try:
{% if form_errors(form) != '' %}
...
{% endif %}
You will also need to make sure that the error_bubbling option on all of your fields is set to true. If you dont the error only exists on the child. So the main form wouldnt have any errors even though some of the children do.
To set the error bubbling you need to do it to each field:
//Some FormType that you have created
class CustomFormType extends AbstractType
{
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder->add('test', 'text', array('error_bubbling'=>true);
}
}
Your other option is to override the form_errors block like suggested in the accepted answer here:
{% block form_errors %}
{% spaceless %}
{% set a = false %}
{% for child in form.children %}
{% if child.get("errors") %}
{% set a = 'true' %}
{% endif %}
{% endfor %}
{% if a == true %}
<div class="alert">
{% for children in form.children %}
{{ form_errors(children) }}
{% endfor %}
</div>
{% endif %}
{% if errors|length > 0 %}
<ul>
{% for error in errors %}
{{
error.messagePluralization is null
? error.messageTemplate|trans(error.messageParameters, 'validators')
: error.messageTemplate|transchoice(error.messagePluralization, error.messageParameters, 'validators')
}}
{% endfor %}
</ul>
{% endif %}
{% endspaceless %}
{% endblock form_errors %}

try
{% if form.vars.errors|length %}

{% if not form.vars.valid %}
<div class="alert alert-error">
{{ form_errors(form) }}
</div>
{% endif %}
from https://stackoverflow.com/a/17826389/511514

Related

How to render a form error in red color?

Using Symfony3 && PhpStorm.2016.3.2 on Ubuntu 16.04
I have a form made in Twig, here is the section that interest me:
<div class="row">
<div class="input-field col s12 validate" id="icon_telephone" type="tel">
{{ form_errors(form) }}
{% if form.vars.errors|length %}
{ form_row(
form.authorPhone,
form.authorPhone.vars|merge({'attr': {'autofocus': null}})
)
}}
{% else %}
{{ form_row(form.authorPhone) }}
{% endif %}
</div>
</div>
I would like to "colorize" the error in Red as an example, without actually using customize form rendering of Symfony which force me to create a view etc..
So I wanted to know if there is a way to actually just turn the error red without industrializing the process.
Making something red is styling so you should be doing that via CSS.
Add a css file to your form template and you can customize the rendering of your form errors like so:
{% block form_errors %}
{% spaceless %}
{% if errors|length > 0 %}
<ul>
{% for error in errors %}
<li class="error-message">{{ error.message }}</li>
{% endfor %}
</ul>
{% endif %}
{% endspaceless %}
{% endblock form_errors %}
And css
.error-message{
color: red;
}
Symfony doc article: https://symfony.com/doc/current/form/form_customization.html#customizing-error-output
Your final twig template would look like this:
<div class="row">
<div class="input-field col s12 validate" id="icon_telephone" type="tel">
{{ form_errors(form) }}
{% if form.vars.errors|length %}
{ form_row(
form.authorPhone,
form.authorPhone.vars|merge({'attr': {'autofocus': null}})
)
}}
{% else %}
{{ form_row(form.authorPhone) }}
{% endif %}
</div>
</div>
<link rel="stylesheet" href="{{ asset('bundles/mybundle/css/style.css') }}" />
{% block form_errors %}
{% spaceless %}
{% if errors|length > 0 %}
<ul>
{% for error in errors %}
<li class="error-message">{{ error.message }}</li>
{% endfor %}
</ul>
{% endif %}
{% endspaceless %}
{% endblock form_errors %}
You override the form_errors block wich is what symfony will use when you call {{ form_errors(form) }}.
If you wan't the simplest solution just inspect you errors in the browser find the right selector and apply css without customizing the form rendering in twig.
For the stylesheet, create the file under Resources/public/css then execute app/console assets:install

Symfony2 + Twig : Can't access form rows outside "body" block?

i'm a beginner into Symfony2 and i hope that the community could help me and another peoples with this problem.
I have 2 forms sent to the views, that i render these 2 into 2 differents blocks (main-col and left-col), in fact main-col contains user profile form and left-col contains form to upload the profile picture .. This way the profile picture won't appear
But when the profile picture is into the main-col (body block), it works ...
There is some examples for better understand :
This example will NOT work :
{% extends 'FOOBAR\QuoteMachineBundle::base.html.twig' %}
{% block menu -%}
{% include 'FOOBAR\QuoteMachineBundle::CompanyProfile/menu.html.twig' %}
{% endblock %}
{% block title -%}Edit company{% endblock %}
{% block leftcol -%}
<h3>Company Logo</h3>
{{ form(picture_form) }}
Current Picture :<br/>
<img class="opttool" src="{{ entity.pictureWebPath }}" alt="" />
{% endblock %}
{% block body -%}
{{ form(form) }}
{% endblock %}
But this one WILL
{% extends 'FOOBAR\QuoteMachineBundle::base.html.twig' %}
{% block menu -%}
{% include 'FOOBAR\QuoteMachineBundle::CompanyProfile/menu.html.twig' %}
{% endblock %}
{% block title -%}Edit company{% endblock %}
{% block leftcol -%}
{% endblock %}
{% block body -%}
{{ form(form) }}
<h3>Company Logo</h3>
{{ form(picture_form) }}
Current Picture :<br/>
<img class="opttool" src="{{ entity.pictureWebPath }}" alt="" />
{% endblock %}
I switched the "current picture form" from leftcol to body ... In fact forms only works in body block.
I should precise that I can use normal variables into leftcol block and that will work.
The form in leftcol will be an "empty" form element with that only children element :
<input type="hidden" name="_method" value="PUT">
How I can render picture_form correctly into leftcol block ??
EDIT : Like you asked, i published sample of my base.html.twig
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
<div class="container">
{% if block('leftcol') is not empty %}
<div class="left-col">{% block leftcol %}{% endblock %}</div>
{% endif %}
<div class="col-main">
<h1>{{ block('title') }}</h1>
<article>
{% block body %}{% block fos_user_content %}{% endblock fos_user_content %}{% endblock %}
</article>
</div>
{% if block('rightcol') is not empty %}
<div class="right-col">{% block rightcol %}{% endblock %}</div>
{% endif %}
</div>
</body>
</html>
Thanks !
I am not 100% sure it will solve your problem but using the block method in a IF statement leads to a new request (meaning everything gets called twice). You should try this:
{% set _block = block('leftcol') %}
{% if _block is not empty %}
<div class='left-col'> {{ _block|raw }} </div>
{% endif %}
Instead of
{% if block('leftcol') is not empty %}
<div class="left-col">{% block leftcol %}{% endblock %}</div>
{% endif %}
And do keep in mind that you should put that kind of logic in your controllers whenever possible.
If I had to make an educated guess, I would say SF/twig are somehow confused by the rendering of two forms inside the same template/block simultaneously. I can't test these two leads right now, but here's what I would try if I were you :
Be more precise when calling your two forms in the twig view :
<form action="foo" method="post" etc...>
{{ form(form_picture) }}
{{ form_rest(form_picture) }}
{{ form_end(form_picture) }}
Symfony's form rendering is highly customizable, find all the details here if you haven't discovered them yet : How to Customize Form Rendering
Use a specific controller, or at least a separate template for at least one of your forms, ideally for each of your forms (but that's a personnal preference) :
{% block leftcol %}
{% render(controller('upload_picture') %}
// or
{% include('upload_picture_form.html.twig', with('form':'form_picture') %}
// Pardon my pseudo-code :P
{% endblock %}
{% block body %}
{{ form(form) }}
{% endblock %}

Bootstrap 3: formatted checkboxes with Symfony & Twig

How to create a formatted group of checkboxes as described in the Bootstrap documentation using the Symfony Form Factory and Twig?
Using something like
<div class="row">
<div class="col-lg-4">
{{ form_label(form.sample) }}
</div>
<div class="col-lg-8">
{{ form_widget(form.sample) }}
</div>
</div>
will not result in the needed output:
a) each checkbox within a Bootstrap 3 structure like:
<div class="radio">
<label>
<input type="radio" ... />Option one
</label>
</div>
b) in addition the ability to output the checkboxes in two or more columns if needed:
<div class="row">
<div class="col-lg-6 col-md-6">
<div class="radio"> ... </div>
</div>
<div class="col-lg-6 col-md-6">
<div class="radio"> ... </div>
</div>
</div>
The proper way to do this is to create your own form theme. I will not write the whole thing here, but what matters to you are those:
{% block choice_widget_expanded %}
{% spaceless %}
<div {{ block('widget_container_attributes') }} class="my-form-choices">
{% for child in form %}
{{ form_widget(child) }}
{% endfor %}
</div>
{% endspaceless %}
{% endblock choice_widget_expanded %}
{% block checkbox_widget %}
{% spaceless %}
<div class="checkbox">
<label for="{{ id }}"><input type="checkbox" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />{{ label|trans({}, translation_domain) }}</label>
</div>
{% endspaceless %}
{% endblock checkbox_widget %}
I removed the label rendering from the choice_widget_expanded so I could have the checkbox inside the label tag, just like what you have in your solution. But you can basically do whatever you want in your form theme. You can also overwrite radio_widget if you want to.
If you look closely at the div around the checkboxes, I gave it the class "my-form-choices". You could give it the classes you want. It could be "col-lg-8", like you have, but for me, it makes more sense to have a generic class name, and then use mixins in your own less file. Your less file would look like this:
#import '../../../../../../vendor/twitter/bootstrap/less/bootstrap.less';
.my-form-row {
.make-row();
}
.my-form-choices {
.make-lg-column(8);
}
.my-form-row-label {
.make-lg-column(4);
}
But that's up to you. You don't have to do this if you don't want to. Finally, you use your theme by starting the twig for your page like this:
{% extends 'MyOwnBundle::layout.html.twig' %}
{% form_theme form 'MyOwnBundle:Component:formtype.html.twig' %}
And you display the row simply like that (the field I used in my test is availability, yours is sample):
{{ form_row(form.availability) }}
I've tried that (with Symfony 2.4), and it works. The output is something like that:
<div class="my-form-row">
<div class="my-form-row-label">
<label class="required">Availability</label>
</div>
<div class="my-form-choices" id="myown_website_contactmessage_availability">
<div class="checkbox">
<label for="myown_website_contactmessage_availability_0">
<input type="checkbox" value="morning" name="myown_website_contactmessage[availability][]" id="myown_website_contactmessage_availability_0">
Morning
</label>
</div>
<div class="checkbox">
<label for="myown_website_contactmessage_availability_1">
<input type="checkbox" value="afternoon" name="myown_website_contactmessage[availability][]" id="myown_website_contactmessage_availability_1">
Afternoon
</label>
</div>
<div class="checkbox">
<label for="myown_website_contactmessage_availability_2">
<input type="checkbox" value="evening" name="myown_website_contactmessage[availability][]" id="myown_website_contactmessage_availability_2">
Evening
</label>
</div>
</div>
</div>
Also notice that I do not have sub-rows, like you have in your solution. In fact, your solution goes beyond the question you were asking in the first place.
EDIT: here's a solution for having multiple columns
To have multiple columns, here is a quick solution. First, the form theme could be something like this:
{% block choice_widget_expanded %}
{% spaceless %}
<div class="my-form-choices-container">
<div {{ block('widget_container_attributes') }} class="my-form-choices">
{% for child in form %}
{{ form_widget(child) }}
{% endfor %}
</div>
</div>
{% endspaceless %}
{% endblock choice_widget_expanded %}
{% block checkbox_widget %}
{% spaceless %}
<div class="my-form-choice">
<div class="checkbox">
<label for="{{ id }}"><input type="checkbox" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />{{ label|trans({}, translation_domain) }}</label>
</div>
</div>
{% endspaceless %}
{% endblock checkbox_widget %}
And then your less file would look like this:
#import '../../../../../../vendor/twitter/bootstrap/less/bootstrap.less';
.my-form-row {
.make-row();
}
.my-form-row-label {
.make-lg-column(4);
}
.my-form-choices-container {
.make-lg-column(8);
}
.my-form-choices {
.make-row();
}
.my-form-choice {
.make-md-column(6);
}
In this solution, you change the number of columns by changing the size of the columns. The cells should stack neatly. In this case, it is better to compile less (I won't explain that here). I have tried this solution, and it works well. The advantage of using less in this case, is that you can use the same form theme on multiple pages, and change the number of columns just by having a different "less" file for each of your pages.
You need to access to the form vars which contain the information about the checkboxes:
form.sample.vars.form.children
now you can loop through the checkboxes and access the values:
{% for children in form.sample.vars.form.children %}
<div class="checkbox>
<label>
<input type="checkbox" name="{{ children.vars.full_name }}" id="{{ children.vars.id }}" value="{{ children.vars.value }}"{% if children.vars.data %} checked="checked"{% endif %} />
{% if children.vars.label is defined %}
{{ children.vars.label|trans }}
{% else %}
{{ children.vars.value|capitalize|trans }}
{% endif %}
</label>
</div>
{% endfor %}
I place this code in a Twig template and add some logic to create rows with variable columns, so it look like this:
{% set cols = columns|default(1) %}
{% set i = 1 %}
{% for children in childrens %}
{% if i == 1 %}<div class="row">{% endif %}
<div class="col-lg-{{ 12/cols }} col-md-{{ 12/cols }}">
<div class="checkbox {{ class|default('') }}">
<label>
<input type="checkbox" name="{{ children.vars.full_name }}" id="{{ children.vars.id }}" value="{{ children.vars.value }}"{% if children.vars.data %} checked="checked"{% endif %} />
{% if children.vars.label is defined %}
{{ children.vars.label|trans }}
{% else %}
{{ children.vars.value|capitalize|trans }}
{% endif %}
</label>
</div>
</div>
{% set i = i+1 %}
{% if i > cols %}
</div>
{% set i = 1 %}
{% endif %}
{% endfor %}
{% if i != 1 %}</div>{% endif %}
now you can include this checkbox template where you need it:
<div class="row">
<div class="col-lg-4">
{{ form_label(form.sample) }}
</div>
<div class="col-lg-8">
{% include 'checkbox.twig' with {childrens:form.sample.vars.form.children, columns:2} only %}
</div>
</div>
the example above will return well formatted Bootstrap 3 output with checkboxes in two columns like this:
<div class="row">
<div class="col-lg-4">
<label class="required">Veranstalter</label>
</div>
<div class="col-lg-8">
<div class="row">
<div class="col-lg-6 col-md-6">
<div class="checkbox ">
<label><input type="checkbox" name="form[sample][]" id="form_sample_0" value="DUMMY">Dummy</label>
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="checkbox ">
<label><input type="checkbox" name="form[sample][]" id="form_sample_1" value="DUMMY_1">Dummy 1</label>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6">
<div class="checkbox ">
<label><input type="checkbox" name="form[sample][]" id="form_sample_2" value="DUMMY_2">Dummy 2</label>
</div>
</div>
</div>
It's easy to use and will also work for radio buttons - just replace the class "checkbox" with "radio".
Ran into this issue today and thought I'd share my solution. I already had a form input override file, but didn't like what I found elsewhere. So wrote a form_label block override like so.
{% block form_label -%}
{% if label is not sameas(false) -%}
{% if not compound -%}
{% set label_attr = label_attr|merge({'for': id}) %}
{%- endif %}
{% if required -%}
{% set label_attr = label_attr|merge({'class': (label_attr.class|default('') ~ ' required')|trim}) %}
{%- endif %}
{% if label is empty -%}
{% set label = name|humanize %}
{%- endif -%}
<label{% for attrname, attrvalue in label_attr %} {{ attrname }}="{{ attrvalue }}"{% endfor %}>{% if 'checkbox' in block_prefixes %}{{ form_widget(form) }}{% endif %}{{ label|trans({}, translation_domain) }}</label>
{%- endif %}
{%- endblock form_label %}
Then the form_row block like so:
{% block form_row %}
{% spaceless %}
{% if 'checkbox' not in block_prefixes %}
<div class="form-group">
{{ form_label(form) }}
{{ form_errors(form) }}
{% if 'datetime' not in block_prefixes %}
{{ form_widget(form, { 'attr': {'class': 'form-control'} }) }}
{% else %}
{{ form_widget(form) }}
{% endif %}
</div>
{% else %}
{% import _self as forms %}
<div class="checkbox">
{{ form_label(form) }}
</div>
{% endif %}
{% endspaceless %}
{% endblock %}
I choose this method because it allowed me to continue to use the basic form(form) method in templates. Hope this helps you.
If you're looking for the simple version of this answer (ie you've already applied the bootstrap_3_layout theme to your form and just want to apply custom label text)
{{ form_widget( form.field, { 'label': 'Custom Label Text' } ) }}

Symfony2 (twig): pass array into form functions

I am trying to implement a form_function that can accept an array of forms.
FormExtension looks like this:
[...]
'form_controls_row' => new \Twig_Function_Node('Symfony\Bridge\Twig\Node\RenderBlockNode', array('is_safe' => array('html'))),
[...]
My field.html.twig would be this:
{% extends 'MopaBootstrapBundle:Form:fields.html.twig' %}
{# import "_self" as the form theme #}
{% form_theme form _self %}
{# make the form fragment customization #}
{% block form_controls_row %}
{% spaceless %}
<div class="controls controls-row">
{% for element in form %}
{{ form_row(element, _context) }}
{% endfor %}
<div>
{% endspaceless %}
{% endblock form_controls_row %}
And my form itself would look like that:
{% form_theme form 'MyBundle::fields.html.twig' %}
<div class="well">
<form action="{{ path('fos_user_registration_register') }}" {{ form_enctype(form) }} method="POST" class="fos_user_registration_register">
{{ form_controls_row([form.firstName, form.lastName]) }}
{{ form_rest(form) }}
</form>
</div>
But everytime I pass in an array ([form.firstName, form.lastName]) into form_controls_row I get an exception.
Is there any way to allow arrays?
Or is there any better solution for my purpose?

Symfony2 form widget container attributes

I need set a class for widget container, but have no idea how Symfony passes attributes to "widget_container_attributes" block
Widget container template:
{% block form_widget %}
{% spaceless %}
<div {{ block('widget_container_attributes') }}>
{{ block('field_rows') }}
{{ form_rest(form) }}
</div>
{% endspaceless %}
{% endblock form_widget %}
Example result:
<div class="MY-CLASS">
<label class="required" for="page_title">Title</label>
<input type="text" value="Next subpage" maxlength="500" required="required" name="page[title]" id="page_title">
</div>
how can I do that?
try
{% extends 'form_div_layout.html.twig' %}
{% block field_rows %}
{% spaceless %}
{% for child in form %}
{{ form_row(child) }}
{% endfor %}
{% endspaceless %}
{% endblock field_rows %}
{% block field_row %}
{% spaceless %}
<div class="myclass">
{{ form_label(form, label|trans) }}
{{ form_widget(form) }}
{{ form_errors(form) }}
</div>
{% endspaceless %}
{% endblock field_row %}