Symfony custom form constraint writes error to parent form - php

I have created a custom form type and contraint in Symfony.
The constraint is attached to the form type like this:
->add('customField', 'customField', array(
'required' =>
'mapped' => false,
'constraints' => array(new CustomField()),
))
where CustomField is the constraint class.
The constraint validator's validate() method looks like this:
public function validate($value, Constraint $constraint)
{
//I know this will always fail, but it's just for illustration purposes
$this->context->addViolation($constraint->message);
}
I have changed the form's default template like this:
{% block form_row -%}
<div class="form-group">
{{- form_widget(form) -}}
{{- form_errors(form) -}}
</div>
{%- endblock form_row %}
{% block customField_widget %}
{% spaceless %}
<!-- actually different but you get the idea -->
<input type="text" name="customField" id="customField" />
{% endspaceless %}
{% endblock %}
{% block form_errors -%}
{% if errors|length > 0 -%}
{%- for error in errors -%}
<small class="help-block">
{{ error.message }}
</small>
{%- endfor -%}
{%- endif %}
{%- endblock form_errors %}
And in the template where the form is displayed, I've added some code to display the errors attached to the whole form rather than individual field errors:
{{ form_start(formAdd) }}
{% if formAdd.vars.valid is same as(false) -%}
<div class="alert alert-danger">
<strong>Errors!</strong> Please correct the errors indicated below.
{% if formAdd.vars.errors %}
<ul>
{% for error in formAdd.vars.errors %}
<li>
{{ error.getMessage() }}
</li>
{% endfor %}
</ul>
{% endif %}
</div>
{%- endif %}
...
The problem with all this, the validator of this particular field, is attaching the constraint violation to the form object and not to the customField form type. This causes the error to be finally displayed with the form's general errors instead of being displayed as a field error.
Now, this is not the only custom form type and validator I added but it's the only one that displays this behavior, without me being able to identify the difference between this one and the rest. Can you spot what is wrong here?

I have sorted this out myself. It has nothing to do with the contraint or the validator. The issue was with the custom form type (which I haven't described in my question). The problem was that this form type had "form" as a parent which is a compound type. This means that by default (according to the docs), the error bubbling is also true and that, in turn, means that "any errors for that field will be attached to the main form, not to the specific field".

You have to specify path in your validator:
$this->context
->buildViolation($constraint->message)
->atPath('customField')
->addViolation();

You have to set 'error_bubbling' to false in your custom form type
class CustomFieldType extends AbstractType
{
public function getName()
{
return 'customField';
}
public function configureOptions(OptionsResolver $resolver)
{
$resolver->setDefault('error_bubbling', false);
}
}

Related

Symfony Form Collection Theming but feed some data

Symfony 3.3
I have a form of my Voyage entity
Voyage entity has a Collection in it, named cities, collection of entity City.
And so do the form with the Collection named cities.
The user first use the form and create an instance of Voyage and add some cities to it, I managed to customise the prototype and render it via javascript when the user click "add city" button.
The form is rendered this way for the interesting part (cleaned version without html):
{% extends "#User/layout.html.twig" %}
{% form_theme form.cities '#Prototype/city.html.twig' %}
{% block content %}
{{ form_start(form) }}
{{ form_errors(form) }}
{{ form_row(form.cities) }}
{{ form_rest(form) }}
{{ form_end(form) }}
{% endblock content %}
The theme for the 'form.cities' :
{% block collection_widget %}
{% import '#Prototype/prototype.city.twig' as proto %}
{% spaceless %}
<div class="collection">
{% if prototype is defined %}
{% set attr = attr|merge({'data-prototype': proto.city(prototype)|escape }) %}
{% endif %}
<div {{ block('widget_container_attributes') }}></div>
<div id="container-cities">
{# Here I will add the cities via javascript when user add one #}
</div>
</div>
{% endspaceless %}
{% endblock collection_widget %}
The macro file used in this theme and imported as proto :
{% macro city(widget, id, name, zip) %}
{% spaceless %}
<div
class="added-city border-gray"
data-id="{{id|default('__id__')}}"
id="{{name|default('__name__')}}">
{{name|default('__city_name__')}} ({{zip|default('__zip__')}})
{{ form_errors(widget) }}
{{ form_widget(widget) }}
</div>
{% endspaceless %}
{% endmacro %}
My general problem : When the user wants to edit its instance of Voyage, it already has some cities in it. How can I render them ? How can I access the cities variable from within the theme.
My partial solution : I wanted to extract the 'container-cities' block from the theme file to the rendered html where the form is initialy rendered and where I can access the variables and do this :
{% import '#Prototype/prototype.city.twig' as proto %}
{% for city in form.cities %}
{{ proto.city(city, city.name) }}
{% endfor %}
But it give me this error :
Neither the property "name" nor one of the methods "name()", "getname()"/"isname()"/"hasname()" or "__call()" exist and have public access in class "Symfony\Component\Form\FormView".
(It doesn't fail on city.id probably because of some other field named id)
My question :
How can I access the cities within the theme and render them with my macro ?
Or
How to access to the cities items where I render the form, because the form.cities doesn't seem to be the actual City entity Collection, and get rid of that error ?
Thanks
I finally solved it, it was that simple :
I just used this in the form theme :
{% for city in form %}
{{ proto.city(city, city.vars.value.id, city.vars.value.name, city.vars.value.zip) }}
{% endfor %}

How can I render an entity (choice <select>) field as a <ul> field in Twig?

Symfony renders an entity field type like a choice dropdown - a select, basically. However, the CSS framework that I'm using defines a sort of 'select' as a ul and li as the options. The Custom Field Type documentation gives no help on this scenario.
I'm converting my code from manual HTML rendering of the form dropdown to symfony form's version using twig and form_widget(). However, I want a ul and li instead of a select.
The manual way of creating my dropdown is:
<ul class='dropdown-menu'>
{% for locator in locators %}
<li>
<a href="#" data-id="{{locator.getId() }}">
{{ locator.getName() }}
</a>
</li>
{% endfor %}
</ul>
That's how I would render my dropdown manually before using symfony forms. It looks like this:
I like it. I think it looks awesome. Now, if I'm using Symfony forms, I can just use this instead:
{{ form_start(form) }}
{{ form_widget(form.locator) }} {# This is my locator dropdown #}
{{ form_widget(form.target) }} {# Ignore this #}
{{ form_end(form) }}
The problem is that this renders this instead:
I can't add my custom CSS here because this is rendered as a select instead of an unordered list and lis.
In case it may help, here's my form type being built:
/**
* {#inheritDoc}
*/
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder->add('target')
->add('locator', 'entity', [
'class' => 'Application\Model\Entity\Locator',
'query_builder' => function(EntityRepository $repo) {
return $repo->createQueryBuilder('e');
},
'empty_value' => 'Locator'
])
->add('save', 'submit', ['label' => 'Save']);
$builder->setAction($this->urlGenerator->generate('page_create_element', [
'suiteId' => $options['suiteId'], 'pageId' => $options['pageId']
]))->setMethod('POST');
}
The Question: Is there any way I can have the form commands above auto-generate my ul / li requirement instead of selects, or do I have to render this manually instead and ignore the symfony forms component for this?
Thanks to some of the posters above, there was some information from Form Theming, but it wasn't exactly enough to go along with so I had to do a little bit of digging on github.
According to the documentation, Symfony uses twig templates to render the relevant bits of a form and it's containing elements. These are just {% block %}s in twig. So the first step was to find where a select button is rendered within the symfony codebase.
Form Theming
Firstly, you create your own theme block in it's own twig file and you apply this theme to your form with the following code:
{% form_theme my_form_name 'form/file_to_overridewith.html.twig %}
So if I had overridden {% block form_row %} in the file above, then when I called {{ form_row(form) }} it would use my block instead of Symfony's default block.
Important: You don't have to override everything. Just override the things you want to change and Symfony will fall back to it's own block if it doesn't find one in your theme.
The Sourcecode
On github I found the source code for Symfony's "choice widget". It's a little complex but if you follow it through and experiment a little bit you'll see where it goes.
Within the choice_widget_collapsed block, I changed the select to uls and options to lis. Here's the theme file I created, note the minor differences described above:
{# Symfony renders a 'choice' or 'entity' field as a select dropdown - this changes it to ul/li's for our own CSS #}
{%- block choice_widget_collapsed -%}
{%- if required and empty_value is none and not empty_value_in_choices and not multiple -%}
{% set required = false %}
{%- endif -%}
<ul {{ block('widget_attributes') }}{% if multiple %} multiple="multiple"{% endif %}>
{%- if preferred_choices|length > 0 -%}
{% set options = preferred_choices %}
{{- block('choice_widget_options') -}}
{%- if choices|length > 0 and separator is not none -%}
<li disabled="disabled">{{ separator }}</li>
{%- endif -%}
{%- endif -%}
{%- set options = choices -%}
{{- block('choice_widget_options') -}}
</ul>
{%- endblock choice_widget_collapsed -%}
{%- block choice_widget_options -%}
{% for group_label, choice in options %}
{%- if choice is iterable -%}
<optgroup label="{{ group_label|trans({}, translation_domain) }}">
{% set options = choice %}
{{- block('choice_widget_options') -}}
</optgroup>
{%- else -%}
<li value="{{ choice.value }}"{% if choice is selectedchoice(value) %} selected="selected"{% endif %}>{{ choice.label|trans({}, translation_domain) }}</li>
{%- endif -%}
{% endfor %}
{%- endblock choice_widget_options -%}
Rendering
Now I can render my form with the following:
{{ form_widget(form.locator, {'attr': {'class': 'dropdown-menu'}}) }}
This uses my theme for the choice dropdown which contains ul and li tags instead of select and option ones. Pretty simple once you know where to look for the original code! The rendered HTML:
<ul id="elementtype_locator" name="elementtype[locator]" required="required" class="dropdown-menu">
<li value="1">id</li>
<li value="2">name</li>
<li value="3">xpath</li>
</ul>
I also had to remove one of the lines that put 'Locator' at the top of the dropdown as there were four dropdown choices (including the empty_data one) instead of three.

Custom form theme breaks Form::modelData property in Symfony 2

OP note: it was simply that li elements aren't passed through in forms which I forgot about.
For context please see my Previous Question on how I required the ability to change select and option tags to ul an li tags when rendering a dropdown with Symfony 2 forms as they look and work well with my CSS framework of choice.
As a result of changing how my form element is rendered, it seems that the data is no longer coming through after submitting.
I am overriding the {% choice_widget_* %} parts of the choice field in order to change these to ul and lis. Here is my change:
{%- block choice_widget_collapsed -%}
{%- if required and empty_value is none and not empty_value_in_choices and not multiple -%}
{% set required = false %}
{%- endif -%}
<ul {{ block('widget_attributes') }}>
{%- if preferred_choices|length > 0 -%}
{% set options = preferred_choices %}
{{- block('choice_widget_options') -}}
{%- if choices|length > 0 and separator is not none -%}
<li disabled="disabled">{{ separator }}</li>
{%- endif -%}
{%- endif -%}
{%- set options = choices -%}
{{- block('choice_widget_options') -}}
</ul>
{%- endblock choice_widget_collapsed -%}
{%- block choice_widget_options -%}
{% for group_label, choice in options %}
{%- if choice is iterable -%}
<optgroup label="{{ group_label|trans({}, translation_domain) }}">
{% set options = choice %}
{{- block('choice_widget_options') -}}
</optgroup>
{%- else -%}
<li value="{{ choice.value }}"{% if choice is selectedchoice(value) %} selected="selected"{% endif %}>{{ choice.label|trans({}, translation_domain) }}</li>
{%- endif -%}
{% endfor %}
{%- endblock choice_widget_options -%}
I found and modified this code from Symfony 2 github source, and it allowed me to render my form as such:
The problem: When submitting this form, the "target" field comes through fine, but my overriding seems to have corrupted how the data is retrieved from the dropdown and my debugging shows empty data fields.
Here's the break line in setDefaultOptions() within my type:
Here's the form data. Please note how the modelData does indeed exist for "target', which is a standard input field, and how the modelData does not exist for the locator dropdown (highlighted):
So the data is coming through as null because of how I've changed how the form is rendered, but what can I do about this?
Can I place some sort of adapter or data transformer to handle this change? What needs to be done? I can imagine this happening with anyone who wants to theme their own form and remove some of the annoying divs that are injected by symfony during rendering. What can I do?
<li></li> elements are not form elements (and thus won't get submitted with the form).
You would need to add a form submit handler (using javascript) that turns the li elements back into some sort of form elements.
Ideally you would transform them back to the <option></option> elements so you don't need a data-transformer on the server.
jQuery boilerplate code:
$(document).ready(function() {
$("#myForm1").submit(function() {
//Gets fired when the form is about to be submitted, but before the actual request
$("#myForm1").append("<optgroup name=.......");
$("ul[name=\"somebundle_formname_fieldname\"]").children("li").each(function () {
$("#myForm1").find("<optgroup name=.......").append("<option value=" + $(this).attr("value") +">bla</option>");
});
});
});
Vanilla JS (IE9+, Chrome, Firefox) boilerplate code:
document.addEventListener("DOMContentLoaded", function() {
var myForm1 = document.getElementById("myForm1");
myForm1.addEventListener('submit', function(e) {
//Gets fired when the form is about to be submitted, but before the actual request
var tmpOptGroup = document.createElement("optgroup");
tmpOptGroup.name = "somebundle_formname_fieldname";
myForm1.appendChild(tmpOptGroup);
var liElements = document.querySelectorAll("ul[name=\"somebundle_formname_fieldname\"] li");
for(var i=0;i<liElements.length;i++) {
var currentLiElement = liElements[i];
//add option, see jquery above
}
});
});

HTML in Symfony2 form labels instead of plain text

I am trying to implement something like this:
<div>
<input type="checkbox" name="checkbox" id="checkbox_id" />
<label for="checkbox_id">I agree to the Terms of Service</label>
</div>
The closest I've come to implement this is through:
<div>
{{ form_widget(form.agreeWithTos) }}
<label for="{{ form.agreeWithTos.vars.id }}">I agree to the Terms of Service</label>
</div>
Is there a better way? Having to specify {{ form.agreeWithTos.vars.id }} is inelegant. :)
Solved this problem using the following code in my form-theme:
{# ---- form-theme.html.twig #}
{% block checkbox_row %}
{% spaceless %}
<div>
{{ form_errors(form) }}
<label class="checkbox" for="{{ form.vars.id }}">
{{ form_widget(form) }}
{{ label|default(form_label(form)) | raw }}
</label>
</div>
{% endspaceless %}
{% endblock %}
in your Form-Template you can then use:
{% form_theme form '::form-theme.html.twig' %}
{{form_row(form.termsOfServiceAccepted, {
'label' : 'I have read and agree to the Terms and conditions'
})
}}
this way, the block from the form-theme would apply to any checkbox on the page. If you need to also use the default-theme, you can add a parameter to enable special-rendering:
{# ---- form-theme.html.twig #}
{% block checkbox_row %}
{% spaceless %}
{% if not useTosStyle %}
{{ parent() }}
{% else %}
{# ... special rendering ... #}
{% endif %}
{% endspaceless %}
{% endblock %}
which would be used like this:
{% form_theme form '::form-theme.html.twig' %}
{{form_row(form.termsOfServiceAccepted, {
'useTosStyle' : true,
'label' : 'I have read and agree to the Terms and conditions'
})
}}
Thanks to a recent commit to Symfony, you can use label_html from Symfony 5.1 onward:
{{ form_label(
form.privacy,
'I accept the privacy terms.',
{
'label_html': true,
},
) }}
I've been beating my head over this then had a eureka moment. The easiest way to do this–BY FAR–is to create a Twig extension.
Here's my Twig code:
{# twig example #}
{% block form_label %}
{% set label = parent() %}
{{ label|unescape|raw }}
{% endblock %}
and PHP:
<?php
new Twig_SimpleFilter('unescape', function($value) {
return html_entity_decode($value);
});
A couple notes:
This unescapes all previously escaped code. You should definitely re-escape afterwards as necessary.
This requires an extends tag for your target form theme in your own custom form theme which you can use in your subsequent forms. Put the twig code in a custom form theme and replace references to your other form theme/themes with this one.
Overall this is the fewest lines of code for the biggest and best outcome that I've been able to find. It's also ultra-portable and DRY: You can extend any form theme and the label will change without you changing the rest of your code.
Another very simple approach is to override the form theme directly in the template which renders the form. Using {% form_theme form _self %} it is as simple as this:
{% form_theme form _self %}
{% block form_label %}
{{ label | raw }}
{% endblock %}
{{ form_start(form) }}
See the corresponding section in the docs:
https://symfony.com/doc/current/form/form_customization.html#method-1-inside-the-same-template-as-the-form
The easiest way to customize the [...] block is to customize it directly in the template that's actually rendering the form.
By using the special {% form_theme form _self %} tag, Twig looks inside the same template for any overridden form blocks. [...]
The disadvantage of this method is that the customized form block can't be reused when rendering other forms in other templates. In other words, this method is most useful when making form customizations that are specific to a single form in your application. If you want to reuse a form customization across several (or all) forms in your application, read on to the next section.
Another approach is to use a simple Twig replacement:
{% set formHtml %}
{{ form(oForm) }}
{% endset %}
{{ formHtml|replace({'[link]': '', '[/link]': ''})|raw }}
In your form, you have something like this in order to make it work:
$formBuilder->add('conditions', CheckboxType::class, [
'label' => 'Yes, I agree with the [link]terms and conditions[/link].'
]
);
Of course, you may change [link] to anything else. Please note that you do not use HTML tags ;-)
I think you are looking for form theming. That way you are able to style each part of form, in an independent file, anyway you want and then just render it in "elegant" way, row by row with {{ form_row(form) }} or simply with {{ form_widget(form) }}. It's really up to you how you set it up.
Symfony 4.2
TWIG:
{% block main %}
....
{% form_theme form _self %}
...
{{ form_row(form.policy, {'label': 'security.newPassword.policy'|trans({"%policyLink%":policyLink, "%termsLink%":termsLink})}) }}
...
{% endblock %}
{% block checkbox_radio_label %}
<label{% with { attr: label_attr } %}{{ block('attributes') }}{% endwith %}>
{{- widget|raw }} {{ label|unescape|raw }}
</label>
{% endblock checkbox_radio_label %}
PHP:
use Twig\Extension\AbstractExtension;
use Twig\TwigFilter;
class AppExtension extends AbstractExtension
{
public function getFilters()
{
return [
new TwigFilter('unescape', function ($value) {
return html_entity_decode($value);
}),
];
}
}
So form theming is pretty complicated. The easiest thing I've found is to just suppress the field's label ('label'=> false in Symfony form class) and then just add the html label in the twig html.
You could leverage form theming in another way: you could move the <label> tag outside the form_label() function.
Create a custom form theme, and for checkboxes only move the <label> tag outside the form_label function:
{% block checkbox_row %}
<label>{{ form_label(form) }}</label>
{{ form_errors(form) }}
{{ form_widget(form) }}
{% endblock checkbox_row %}
{% block checkbox_label %}
{{ label }}
{% endblock checkbox_label %}
Now, in your teplate, override the label of your checkbox, and thus effectively inject HTML into the label function:
{% form_theme form 'yourtheme.html.twig' _self %}
{% block _your_TOS_checkbox_label %}
I agree with terms and conditions
{% endblock _your_TOS_checkbox_label %}

Symfony: Add custom classes to form elements when failing validation?

When Symfony finds that your form is invalid, it shows it again but with the addition of errors for each element that failed validation. The errors are basically just unordered lists:
<label>First Name</label>
<ul class='error-list'>
<li>Required.</li>
</ul>
<input type='text' name='first_name'/>
I'm trying to figure out if there is some way to force Symfony to also add custom classes to whatever elements I want when they fail validation. For example add a class='error' to my label or input when the validation fails. That way I can style those elements.
I started looking at form schema decorators but at first glance it doesn't seem like there is a way to do it. But I could be wrong.
Is there anyway to accomplish this?
If your app requires javascript to be enabled, then the easiest and more flexible way to go is to use javascript to through in some classes/attributes dynamically. For example, you could have a script like this
jQuery(document).ready(function($){
if($('.sf_admin_form .error_list').length>0 ){ // style if erro is present
$('.sf_admin_form .error_list').each(function(){
// label of fields with error should be bold and red
$(this).prev('label').css('font-weight', 'bold');
$(this).prev('label').css('color', 'red');
});
}
});
If you do need not count on javascript being enabled, than your choice is use a custom form formatter. The following is an example.
/**
* Class derived from Table formatter, renders customized version if the row has errors.
*
* #package symfony
* #subpackage widget
* #author Paulo R. Ribeiro <paulo#duocriativa.com.br>
*/
class sfWidgetFormSchemaFormatterCustom extends sfWidgetFormSchemaFormatter
{
protected
$rowFormat = "<tr>\n <th>%label%</th>\n <td>%error%%field%%help%%hidden_fields%</td>\n</tr>\n",
// THIS IS NEW
$rowWithErrorsFormat = "<tr class='has-errors'>\n <th class='has-errors'>%label%</th>\n <td class='has-errors'>%error%%field%%help%%hidden_fields%</td>\n</tr>\n",
//
$errorRowFormat = "<tr><td colspan=\"2\">\n%errors%</td></tr>\n",
$helpFormat = '<br />%help%',
$decoratorFormat = "<table>\n %content%</table>";
$errorListFormatInARow = " <ul class=\"error_list\">\n%errors% </ul>\n",
$errorRowFormatInARow = " <li>%error%</li>\n",
$namedErrorRowFormatInARow = " <li>%name%: %error%</li>\n",
public function formatRow($label, $field, $errors = array(), $help = '', $hiddenFields = null)
{
if(count($erros)==0){ // no errors, renders as usual
return strtr($this->getRowFormat(), array(
'%label%' => $label,
'%field%' => $field,
'%error%' => $this->formatErrorsForRow($errors),
'%help%' => $this->formatHelp($help),
'%hidden_fields%' => null === $hiddenFields ? '%hidden_fields%' : $hiddenFields,
));
} else { // has errors, through in some classes
return strtr($this->getRowWithErrorsFormat(), array(
'%label%' => $label,
'%field%' => $field,
'%error%' => $this->formatErrorsForRow($errors),
'%help%' => $this->formatHelp($help),
'%hidden_fields%' => null === $hiddenFields ? '%hidden_fields%' : $hiddenFields,
));
}
}
public function getRowWithErrorsFormat()
{
return $this->rowWithErrorsFormat;
}
}
To enabled the custom formatter for all the forms, use the ProjectConfiguration class to set it up.
// /config/ProjectConfiguration.class.php
class ProjectConfiguration extends sfProjectConfiguration
{
public function setup()
{
/// CODE FOR ENABLING PLUGINS...
// configure your default form formatter
sfWidgetFormSchema::setDefaultFormFormatterName('custom');
}
}
I found another solution using the hasError() method.
<?php if ($form['email']->hasError()) {
echo $form['email']->render( array('class'=>'error') );
} else {
echo $form['email']->render();
} ?>
hasError() apparently checks to see if there are errors for that form element or not.
Instead of applying a condition to every form field you could globally overide the form_label block:
{%- block form_row -%}
<div>
{{- form_label(form) -}}
{{- form_widget(form) -}}
</div>
{%- endblock form_row -%}
{%- 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 -%}
{%- if label_format is not empty -%}
{% set label = label_format|replace({
'%name%': name,
'%id%': id,
}) %}
{%- else -%}
{% set label = name|humanize %}
{%- endif -%}
{%- endif -%}
{% if errors|length > 0 %}
{% set label_attr = label_attr|merge({'class': (label_attr.class|default('') ~ ' error_class')|trim}) %}
{% endif %}
<label{% for attrname, attrvalue in label_attr %} {{ attrname }}="{{ attrvalue }}"{% endfor %}>{{ label|trans({}, translation_domain) }}</label>
{%- endif -%}
{%- endblock form_label -%}
And in your config:
twig:
form:
resources:
- 'Form/fields.html.twig'

Categories