I like to 'form-theme' my datetime widget in my form.
I have created a fields.html.twig file with this in it:
{% block datetime_widget %}
{% spaceless %}
<div {{ block('widget_container_attributes') }}>
{{ '{{ day }}-{{ month }}-{{ year }}'|replace({
'{{ day }}': form_widget(form.day),
'{{ month }}': form_widget(form.month),
'{{ year }}': form_widget(form.year),
})|raw }}
{{ form_widget(form.hour, { 'attr': { 'size': '1' } }) }} : {{ form_widget(form.minute, { 'attr': { 'size': '1' } }) }} : {{ form_widget(form.second, { 'attr': { 'size': '1' } }) }}
</div>
{% endspaceless %}
{% endblock datetime_widget %}
I've entered this line in my form view template
{% form_theme form 'AcmeDashboardBundle:Form:fields.html.twig' %}
The datetime widget gets rendered. But the date and time parts are in a separate div element. Which breaks the widget in 2 lines. I'd like to display the date and time part next to each other.
To achieve this you must redefine either the datetime_widget without using the built in date_widget & time_widget (because they are each wrapped with divs) or you can redefine the date_widget & time_widget to remove their wrapping divs.
Here's how to implement the first option:
{% extends 'form_div_layout.html.twig' %}
{% block datetime_widget %}
{% spaceless %}
{% if widget == 'single_text' %}1
{{ block('field_widget') }}
{% else %}
<div {{ block('widget_container_attributes') }}>
{{ form_errors(form.date.year) }}
{{ form_errors(form.date.month) }}
{{ form_errors(form.date.day) }}
{{ form_errors(form.time) }}
{{ form_widget(form.date.year) }}
{{ form_widget(form.date.month) }}
{{ form_widget(form.date.day) }}
{{ form_widget(form.time.hour, { 'attr': { 'size': '1' } }) }}:{{ form_widget(form.time.minute, { 'attr': { 'size': '1' } }) }}
</div>
{% endif %}
{% endspaceless %}
{% endblock datetime_widget %}
And here's how to implement the second option:
{% extends 'form_div_layout.html.twig' %}
{% block date_widget %}
{% spaceless %}
{% if widget == 'single_text' %}
{{ block('field_widget') }}
{% else %}
{{ date_pattern|replace({
'{{ year }}': form_widget(form.year),
'{{ month }}': form_widget(form.month),
'{{ day }}': form_widget(form.day),
})|raw }}
{% endif %}
{% endspaceless %}
{% endblock date_widget %}
{% block time_widget %}
{% spaceless %}
{% if widget == 'single_text' %}
{{ block('field_widget') }}
{% else %}
{{ form_widget(form.hour, { 'attr': { 'size': '1' } }) }}:{{ form_widget(form.minute, { 'attr': { 'size': '1' } }) }}{% if with_seconds %}:{{ form_widget(form.second, { 'attr': { 'size': '1' } }) }}{% endif %}
{% endif %}
{% endspaceless %}
{% endblock time_widget %}
Then the date & time will be together in the same div. Obviously you could add some space between the date and time by adding in your desired html
Hope that helps!
Related
My form theme:
{% block form_row %}
<div class="form_row {% if errors|length > 0 %} is_error {% endif %} {{ attr.class }}" {% if attr|length > 0 %} {% for key, value in attr %} {{key}}="{{value}}" {% endfor %} {% endif %}>
{% if block_prefixes.1 != "checkbox" %}
{{ form_label(form)|raw }}
{% endif %}
{% if icon != null and block_prefixes.1 != "checkbox" %}
<div class="input__icon-container {% if block_prefixes.2 == "password" %}input__password-container{% endif %}">
<div class="icon">
{{ source('#public_path' ~ asset('build/images/icons/' ~ icon|replace({"icon-":""}) ~ '.svg')) }}
</div>
{% if block_prefixes.2 == "password" %}
<span class="password-reveal">Show</span>
{% endif %}
{{ form_widget(form, { 'attr': {'class': 'form-control'} }) }}
</div>
{{ form_errors(form) }}
{% else %}
{% if block_prefixes.2 == "password" %}
<div class="input__password-container">
<span class="password-reveal">Show</span>
{% endif %}
{{ form_widget(form, { 'attr': {'class': 'form-control'} }) }}
{% if block_prefixes.2 == "password" %}
</div>
{% endif %}
{{ form_errors(form) }}
{% endif %}
</div>
{% endblock %}
{% block radio_widget %}
<div class="label">{{ label|raw }} {% if help != null %} <span class="help">{{help}}</span> {% endif %}</div>
{% for choice in choices %}
<div class='input__choice-container'>
<label class="is_regular"> <input type="radio" name="{{ full_name}}" {% if required == "true" %} required="required" {% endif %} value="{{ choice.value }}"><span class="radio"></span> <span>{{ choice.label }}</span> </label>
</div>
{% endfor %}
{% endblock %}
{% block checkbox_widget %}
<div class="custom-checkbox custom-control">
<input type="checkbox" class="custom-control-input" id="{{id}}" name="{{ full_name}}">
<label class="custom-control-label" for="{{id}}">{{label|raw}}</label>
</div>
{% endblock %}
The error I got:
Key "class" does not exist as the array is empty.
But that's not accurate because this is my form output for this form row:
{{ form_row(registrationForm.displayname, {
attr : { "class" : "mb-1", "data-test" : "tests"}
})}}
So the question is here, how do I output the class content in the appropriate manner? Clearly I'm doing it wrong.
It is because your template doesnt print class literally
Understand the structure of forms here Form Customization
You will need to inject attribute print logic just like one of the built-in templates found( bootstrap 4 example) in Form Themes
{% block form_row -%}
{%- set widget_attr = {} -%}
{%- if help is not empty -%}
{%- set widget_attr = {attr: {'aria-describedby': id ~"_help"}} -%}
{%- endif -%}
<div{% with {attr: row_attr|merge({class: (row_attr.class|default('') ~ ' form-group' ~ ((not compound or force_error|default(false)) and not valid ? ' has-error'))|trim})} %}
{{ block('attributes') }}
{% endwith %}>
{{- form_label(form) }} {# -#}
{{ form_widget(form, widget_attr) }} {# -#}
{{- form_help(form) -}}
{{ form_errors(form) }} {# -#}
</div> {# -#}
{%- endblock form_row %}
If you don't want to do it over, extend built in form widgets which has the printing logic.
Or simply work out on your block to print these passed attributes.
I want my form title to be displayed in h2 selector. I did something like that but it throws me an error "exception: "An exception has been thrown during the rendering of a template ("Notice: Undefined offset: -1").""
// how should I change THIS part? To change only the main form title/label?
// I made it work somehow but then it changes all labels... Is there some
// selector which allows to style MAIN title of the form?
{% block form_label %}
{% spaceless %}
<h2>{{ form_label(form) }}</h2>
{% endspaceless %}
{% endblock form_label %}
I've heard that I shouldn't put it in my project file in h2 selector just in form template. It's cleaner and even though documentation doesn't forbide that I was encouraged to do it another way and that's how I want to try it.
{% form_theme form 'Forms/base_form.html.twig' %}
{{ form_start(form) }}
{{ form_label(form, 'Project title', { 'label_attr': {'class': 'main-form-label'} }) }}
// so as I shouldn't put all that line in <h2> can I somehow do it in template between {% block form_label %} ?
{{ form_row(form.title, {'label': 'My title'}) }}
{{ form_row(form.isComplete, {'label': 'Dropdown'}) }}
{{ form_row(form.comment, {'label': 'Comment'}) }}
{{ form_row(form.submit, {'label': 'Submit'}) }}
{{ form_end(form) }}
Also... Whats the difference/what should I use - {% block form_label %} or {%- block form_label -%}
My whole template:
{% block form_label %}
{% spaceless %}
<h2>{{ form_label(form) }}</h2>
{% endspaceless %}
{% endblock form_label %}
{% block form_row %}
{% spaceless %}
{{ form_widget(form) }}
{{ form_errors(form) }}
{% endspaceless %}
{% endblock form_row %}
{% block submit_row %}
{% spaceless %}
<div class="col-12">
{{ form_widget(form) }}
</div>
{% endspaceless %}
{% endblock submit_row %}
{% block text_widget %}
{% spaceless %}
<div class="col-12">
<div>
{{ form_label(form) }}
</div>
{{ form_widget(form) }}
</div>
{% endspaceless %}
{% endblock text_widget %}
{% block choice_widget %}
{% spaceless %}
<span>
{{ form_label(form) }}
{% if expanded %}
{{ block('choice_widget_expanded') }}
{% else %}
{{ block('choice_widget_collapsed') }}
{% endif %}
{{ form_errors(form) }}
</span>
{% endspaceless %}
{% endblock choice_widget %}
In case you get stuck somewhere ;)
We use to do it this way (when we want custom rendering).
First, we extend the FormType :
namespace App\Form\Extension;
use Symfony\Component\Form\AbstractTypeExtension;
use Symfony\Component\Form\Extension\Core\Type\FormType;
use Symfony\Component\Form\FormInterface;
use Symfony\Component\Form\FormView;
use Symfony\Component\OptionsResolver\OptionsResolver;
class FormTypeExtension extends AbstractTypeExtension
{
public function getExtendedType()
{
return FormType::class;
}
public function configureOptions(OptionsResolver $resolver)
{
$resolver->setDefault('main_title', false);
$resolver->setAllowedTypes('main_title', 'boolean');
}
public function buildView(FormView $view, FormInterface $form, array $options)
{
$view->vars['main_title'] = $options['main_title'];
}
}
Think to register you extension in Symfony !
Then you can use it in your form builder this way :
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder->add(
'myField',
TextType::class,
array(
'main_title' => true
));
}
Finally, in your template :
{% block form_row -%}
{% spaceless %}
{% if main_title %}
<h2>{{ form_label(form) }}</h2>
{% else %}
{{ form_label(form) }}
{{ form_widget(form) }}
{% endif %}
{% endspaceless %}
{%- endblock form_row %}
Feel free to override that block with your needs ;-)
I want to remove 'div' from form_row block using form_theme like this:
{% form_theme feedback_form _self %}
{% block form_row %}
{{ form_label(form) }}
{{ form_errors(form) }}
{{ form_widget(form) }}
{% endblock %}
{{ form_start(feedback_form) }}
{{ form_row(feedback_form.name) }}
{{ form_row(feedback_form.email) }}
{{ form_row(feedback_form.subject) }}
<button type="submit">Send</button>
{{ form_end(feedback_form) }}
just like it is said in Doc https://symfony.com/doc/2.8/form/form_customization.html#customizing-the-form-row
The trouble is that twig tries to render the {% block form_row %} right in that place of template, where it is, and the result is
Variable "form" does not exist.
because I don't have variable 'form' in this template.
The template is rendered by separate action in the footer of page, and it doesn't extend anything.
Ok, I found the solution while was writing the question.
Putting the code of form_row block to the separate file solves the problem.
{# feedback_form.html.twig #}
{% form_theme feedback_form 'fields.html.twig' %}
{{ form_start(feedback_form) }}
{{ form_row(feedback_form.name) }}
{{ form_row(feedback_form.email) }}
{{ form_row(feedback_form.subject) }}
<button type="submit">Send</button>
{{ form_end(feedback_form) }}
{# fields.html.twig #}
{% block form_row %}
{{ form_label(form) }}
{{ form_errors(form) }}
{{ form_widget(form) }}
{% endblock %}
Extending another template helps too.
{# base.html.twig #}
{% block content %}
{% endblock %}
{# feedback_form.html.twig #}
{% extends 'base.html.twig' %}
{% form_theme feedback_form _self %}
{% block form_row %}
{{ form_label(form) }}
{{ form_errors(form) }}
{{ form_widget(form) }}
{% endblock %}
{% block content %}
{{ form_start(feedback_form) }}
{{ form_row(feedback_form.name) }}
{{ form_row(feedback_form.email) }}
{{ form_row(feedback_form.subject) }}
<button type="submit">Send</button>
{{ form_end(feedback_form) }}
{% endblock %}
I have a form with a field for entering birthdate.
$builder->add('birthDate', 'birthday', array('label' => 'birthDate', 'translation_domain' => 'messages', 'required' => false, 'widget' => 'choice'))
In some cases i want to disable the birhtdate modifications in twig template, like.
{{ form_row(form.birthDate.day, {'attr': {'disabled': true}}) }}
{{ form_row(form.birthDate.month, {'attr': {'disabled': true}}) }}
{{ form_row(form.birthDate.year, {'attr': {'disabled': true}}) }}
This works fine, but if i render the complete row in one statement like:
{{ form_row(form.birthDate, {'attr': {'disabled': true}}) }}
This don't disable the birthdate field. Have anyone the same issue?
I solve my issue, the problem is that the attributes not injected into date_widget
I ovewrite the date_widget, now everything is fine.
Before i modify it:
{% block date_widget -%}
{% if widget == 'single_text' %}
{{- block('form_widget_simple') -}}
{% else -%}
{% set attr = attr|merge({class: (attr.class|default('') ~ ' form-inline')|trim}) -%}
{% if datetime is not defined or not datetime -%}
<div {{ block('widget_container_attributes') -}}>
{%- endif %}
{{- date_pattern|replace({
'{{ year }}': form_widget(form.year),
'{{ month }}': form_widget(form.month),
'{{ day }}': form_widget(form.day),
})|raw -}}
{% if datetime is not defined or not datetime -%}
</div>
{%- endif -%}
{% endif %}
{%- endblock date_widget %}
After my modification
{% block date_widget -%}
{% if widget == 'single_text' %}
{{- block('form_widget_simple') -}}
{% else -%}
{% set attr = attr|merge({class: (attr.class|default('') ~ ' form-inline')|trim}) -%}
{% if datetime is not defined or not datetime -%}
<div {{ block('widget_container_attributes') -}}>
{%- endif %}
{{- date_pattern|replace({
'{{ year }}': form_widget(form.year, {'attr': attr}),
'{{ month }}': form_widget(form.month, {'attr': attr}),
'{{ day }}': form_widget(form.day, {'attr': attr}),
})|raw -}}
{% if datetime is not defined or not datetime -%}
</div>
{%- endif -%}
{% endif %}
{%- endblock date_widget %}
You should not disable it in your template, but when you build your form. (see birthday form reference)
Maybe try widget instead of row:
{{ form_widget(form.birthDate.day, {'attr': {'disabled': true}}) }}
I am trying to alter the date_widget using symfony2 and twig. I would like to display just the year.
After reading Symfony 2 date input with only year selector and the symfony2 book chapter on templating forms I have copied the date_widget block into my template and am receiving the error:
Variable "widget" does not exist in bundle....
here is the code from my template:
{% extends '::base.html.twig' %}
{% block body %}
{% block date_widget %}
{% spaceless %}
{% if widget == 'single_text' %}
{{ block('field_widget') }}
{% else %}
<div {{ block('widget_container_attributes') }}>
{{ date_pattern|replace({
'{{ year }}': form_widget(form.year),
})|raw }}
</div>
{% endif %}
{% endspaceless %}
{% endblock date_widget %}
....print form (generated though app/console generate:crud)
{% endblock %}
Any Thoughts? Thanks!
put the date_widget block outside of the body block, and add the following code after the initial extends
{% form_theme form _self %}
now, your code should look like this
{% extends '::base.html.twig' %}
{% form_theme form _self %}
{% block body %}
....print form (generated though app/console generate:crud)
{% endblock %}
{% block date_widget %}
{% spaceless %}
{% if widget == 'single_text' %}
{{ block('field_widget') }}
{% else %}
<div {{ block('widget_container_attributes') }}>
{{ date_pattern|replace({
'{{ year }}': form_widget(form.year),
})|raw }}
</div>
{% endif %}
{% endspaceless %}
{% endblock date_widget %}
http://symfony.com/doc/current/book/forms.html#form-theming