I have the following form where questionaire.Questions is a collection of QuestionType which is just a yes/no <select>.
Here's what the twig looks like:
Expected:
{{ form_start(questionaire) }}
{% for question in questionaire.Questions %}
<div class="question">
{{ form_label(question) }}
</div>
<div>
{{ form_widget(question) }}
</div>
{% endfor %}
{{ form_end(questionaire) }}
However it gets rendered like this:
<div class="question">
//This is where I want the label. But instead I get this:
<label></label>//Unsure why it's empty. Maybe it's questionaire.Question's label?
</div>
<div>
<label>lorem ipsum...</label> //Wrong place. Label gets rendered here instead.
<select>...</select> //Selection widget is correctly rendered.
</div>
I think the label is getting rendered along with the widget. Here's my QuestionType just in case.
class QuestionType extends AbstractType
{
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder->addEventListener(FormEvents::POST_SET_DATA, function (FormEvent $event) {
$question = $event->getData();
$form = $event->getForm();
$form->add('Answer', 'choice', array(
'label' => $question->getQuestion(),
'choices' => array(
'' => 'Select One',
'Yes',
'No'
)
)
);
}
);
}
...
}
How can I get the label to where I want it?
You have to call the form_widget and form_label for the answer type
{{ form_label(question.Answer) }}
{{ form_widget(question.Answer) }}
You need to define the block question_row in a form theme, and use {{ form(questionaire_form) }} to render the entire form.
Acme/DemoBundle/Form/Type/QuestionType.php
// ...
public function getName(){
return 'question';
}
// ...
Acme/DemoBundle/Controller/DefaultController.php
// ...
public function questionaireAction(){
$form = $this->createForm(new BriefQuestionaireType());
return $this->render('AcmeDemoBundle:Default:brief_questionaire.html.twig', array(
'questionaire_form' => $form->createView()
));
}
// ...
Acme/DemoBundle/Resources/views/Default/brief_questionaire.html.twig
<html>
<head>
<title>Questionaire</title>
</head>
<body>
{% form_theme questionaire_form 'AcmeDemoBundle:Form:form.html.twig' %}
{{ form(questionaire_form) }}
</body>
</html>
Acme/DemoBundle/Resources/views/Form/form.html.twig
We create a block named [block_prefix]_row, where block_prefix is derived from getName() in QuestionType above. When this form theme is used, all QuestionType rows are rendered this way.
{% block question_row %}
<div class="question">
{{ form_label(form) }}
</div>
<div>
{{ form_widget(form) }}
{{ form_error(form) }}
</div>
{% endblock %}
Related
I created a custom field type class BootstrapToggleType extends AbstractType which is child of CheckboxType I also prefixed it just in case as follows
public function getBlockPrefix(): string
{
return 'bootstrap_toggle';
}
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder->addEventListener(FormEvents::PRE_SET_DATA, function (FormEvent $event) {
$form = $event->getForm();
$config = $form->getParent()->get($form->getName())->getConfig();
$options = $config->getOptions();
$defaultDataOptions = $this->_bootstrapToggleDataDefaults;
$form->getParent()->add($form->getName(), CheckboxType::class, array_replace_recursive($options, [
'attr' => $defaultDataOptions,
]))
;
});
}
I added custom form theme to twig.yaml form_themes: ['Form/custom_types.html.twig', 'bootstrap_4_layout.html.twig'] and created mentioned file with following code
{% block bootstrap_toggle_row %}
{% for child in form.children if not child.rendered %}
<div class="my-custom-wrapper">
<div class="form-group">
{{ form_label(child) }}
{{ form_widget(child) }}
{{ form_help(child) }}
{{ form_errors(child) }}
</div>
</div>
{% endfor %}
{% endblock %}
However the field is rendered using standard theme ignoring bootstrap_toggle_row What am I doing wrong?
The problem is basically with this part of code $builder->addEventListener(FormEvents::PRE_SET_DATA, function (FormEvent $event) { . However I need to use such construction to create a field using name provided by FormType object $builder->add('is_published', BootstrapToggleType::class)
if I change that part of code to something like that
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder->addChild('testName', CheckboxType::class);
}
my custom template is rendered correctly.
added
Because I re-added another child I have to provide it's correct block prefix.
$form->getParent()->add($form->getName(), CheckboxType::class, array_replace_recursive($options, [
'attr' => $defaultDataOptions,
'block_prefix' => 'bootstrap_toggle'
]));
Then in my custom template I need to reffer directly to the form variable as a single child, not an array. So instead of looping over children
{% for child in form.children if not child.rendered %}
just direct call
{{ form_label(form) }}
{{ form_widget(form) }}
{{ form_help(form) }}
{{ form_errors(form) }}
Now it works.
I have a form with author and message fields and NotBlank() validation on both.
In twig, I do this:
{{ form_start(form) }}
{{ form_errors(form.author) }}
{{ form_label(form.author) }}
{{ form_widget(form.author) }}
{{ form_errors(form.message) }}
{{ form_label(form.message) }}
{{ form_widget(form.message) }}
{{ form_end(form) }}
If I press Save button with empty fields I EXPECT to see this:
But I get this:
Somehow the bottom error message comes from the {{ form_label(...) }} I say this, because if I comment the labels out and use static HTML for labels, the output is like on first picture.
I would prefer not to use static HTML for labels, but I don't understand where the second error messages came from.
Below my code:
Form
class TestFormType extends AbstractType
{
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder
->add('author', TextType::class, ['required' => false, 'constraints' => [new NotBlank()]])
->add('message', TextType::class, ['required' => false, 'constraints' => [new NotBlank()]])
->add('save', SubmitType::class)
;
}
}
Controller
class TestController extends Controller
{
/**
* #Route("/testing", name="test")
* #param Request $request
* #return RedirectResponse|Response
*/
public function index(Request $request)
{
$form = $this->createForm(TestFormType::class);
$form->handleRequest($request);
if ($form->isSubmitted() && $form->isValid())
{
return $this->redirectToRoute('test');
}
return $this->render('test/index.html.twig', [
'form' => $form->createView(),
]);
}
}
Template
{% extends 'base.html.twig' %}
{% block title %}Hello TestController!{% endblock %}
{% block body %}
<p>This is a test...</p>
{{ form_start(form) }}
{{ form_errors(form.author) }}
{{ form_label(form.author) }}
{{ form_widget(form.author) }}
{{ form_errors(form.message) }}
{{ form_label(form.message) }}
{{ form_widget(form.message) }}
{{ form_end(form) }}
{% endblock %}
For bootstrap theme error block is integrated in label.
So you need either to remove form_errors block in your template or to override form_label block.
You can use form_row (as #Adrien suggests in commentaries) as there is no form_errors call
You've explicitly added form_errors whereas error message already rendered via form_label. either you can remove form_errors or form_label.
I need to create a custom form but used within Symfony so I, therefore, have to create a Symfony form. However, I'd like to be able to use the functionality Sonta field types provide like ModeListType::class.
So far I have created a custom route on my admin, within the controller action I create a new Symfony form. The controller action then returns a view with the form which extends the Sonata base edit layout.
class ExampleController
{
public function exampleAction(Request $request)
{
$order = new FooBar();
$modelManager = $this->get('sonata.admin.manager.orm');
$form = $this->createForm(ExampleType::class, $order, [
'model_manager' => $modelManager,
]);
$form->handleRequest($request);
if ($form->isSubmitted() && $form->isValid()) {
//
}
return $this->renderWithExtraParams('admin/test.html.twig', [
'form' => $form->createView(),
'action' => 'create',
'object' => $order,
'objectId' => null,
]);
}
}
My form:
class ExampleType extends AbstractType
{
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder
->add('job', ModelListType::class, [
'model_manager' => $options['model_manager'],
]);
}
public function configureOptions(OptionsResolver $resolver)
{
$resolver->setDefaults([
'data_class' => FooBar::class,
]);
$resolver->setRequired([
'model_manager',
]);
}
}
And my template:
{% extends 'bundles/SonataAdminBundle/CRUD/base_edit.html.twig' %}
{% import "#SonataAdmin/CRUD/base_edit_form_macro.html.twig" as
form_helper %}
{% block title %}
Here
{% endblock %}
{% block sonata_tab_content %}
<div class="col-md-12">
<div class="row">
<div class="col-md-12">
<div class="box box-primary">
<div class="box-body">
{{ form(form) }}
</div>
</div>
</div>
</div>
</div>
{% endblock %}
This renders an input without the additional buttons like: List, Add, Delete. Clicking into the input also doesn't do anything, so it isn't treated as a Sonata input.
Any help on solving this would be great.
As you override {% block sonata_tab_content %}, maybe you should try to put inside
{% block formactions %}{{parent()}}{{% endblock %}
{% block sonata_tab_content %}
<div class="col-md-12">
<div class="row">
<div class="col-md-12">
<div class="box box-primary">
<div class="box-body">
{{ form(form) }}
</div>
</div>
</div>
</div>
</div>
{% block formactions %}
{{parent()}}
{{% endblock %}
{% endblock %}
I have a form that has two rendered controllers (forms) inside it. I want to pass a variable from the main form to the rendered. I know I can do it with something like this:
{{ render(controller(
'CompanyNameofBundle:Search:shortjq', {'orgid':entity.orgId})) }}
But I am having troubles accessing the 'orgid' which is in the main form.
my.html.twig
{% extends 'CompanyNameofBundle::base.html.twig' %}
{% block body -%}
<h1>Organization Edit</h1>
{{ form_start(edit_form, {'attr': {'novalidate': 'novalidate'}}) }}
<div class="form-group'">
<div class="col-md-2">{{ form_label(edit_form.orgName, 'Organization Name') }}</div>
<div class="col-md-4">{{ form_widget(edit_form.orgName) }}</div>
<div class="hidden">{{ form_widget(edit_form.orgId) }}</div>
<div> </div><div> </div>
</div>
<ul class="record_actions">
<li>{{ form_end(edit_form) }}</li>
<li>{{ form(delete_form) }}</li>
<li>
<a href="{{ path('org') }}">
Back to the list
</a>
</li>
</ul>
{{ render(controller(
'CompanyNameofBundle:Search:shortjq', {'orgid':entity.orgId})) }}
{% if entity.orgId is not null %}
{{ render(controller(
'CompanyNameofBundle:OrgMember:test', {'orgid':entity.orgId})) }}
{% endif %}
{% endblock %}
SearchController.php
/**
* #Route("/shortjq", name="shortjq")
* #Template()
*/
public function shortjqAction()
{
$form = $this->createForm(new JqueryType(), null, [
'action' => '',
'method' => 'POST'
]);
return array(
'form' => $form->createView(),
);
}
JqueryType.php
/**
* #param FormBuilderInterface $builder
* #param array $options
*/
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder
->setMethod('POST')
->add('name', 'text')
->add('orgid', 'integer')
->add('search', 'submit')
;
}
/**
* #return string
*/
public function getName()
{
return 'companynameofbundle_jquery';
}
To access the form widgets into the views I use this:
{{ form_widget(form.orgid) }}
If you also want to add attributes to that widget you can add them like that (for example to add a class to the widget):
{{ form_widget(form.org, { 'attr': {'class': 'the-css-class-you-want'} }) }}
Here you can search for more information Twig Template Form Function and Variable Reference
I would want a form for my entity « X ». This entity own a relationship OneToMany with many entities of type « X ». It's a relationship parent <-> children.
When I create my form simply, it works.
class XType extends AbstractType
{
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder
->add("name", "text", array("label" => "Nom"))
->add("children", "collection", array(
"type" => new XType(),
"by_reference" => false));
}
}
Then, I would like add easily new entity in my collection with the option « allow_add », and used the prototype to add in javascript. This is my form with the « allow_add » option.
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder
->add("name", "text", array("label" => "Nom"))
->add("children", "collection", array(
"type" => new XType(),
"allow_add" => true,
"by_reference" => false));
}
When I execute with or without called the prototype, I have an webserver error. It's XDebug which kick my request because the recursive call is too big. There are cascade call.
What's the best solution to resolve my problem ?
I can't really say where your problem is, but should be somewhere around javascript and the collection prototype. Also, when you allow items to be added, you usually allow to allow_delete too.
Take a look at my example:
$builder->add('book', 'collection', array(
'type' => new BookType(),
'allow_add' => true,
'allow_delete' => true,
'prototype_name' => '__prototype__',
'by_reference' => false,
'error_bubbling' => false
);
To the template where you render form, include this:
{% block javascript %}
{{ parent() }}
{% javascripts
'#ProjectSomeBundle/Resources/public/js/form/collection.js'
%}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
And the collection.js file holds this:
$(function($) {
$addButton = $('button.add');
$collection = $addButton.parent().children().first();
$addButton.click(function () {
var prototype = $($collection.data('prototype').replace(/__prototype__/g, function() { return (new Date()).getTime(); }));
prototype.appendTo($collection.children('ul'));
});
$('body').on('click', 'button.remove', function () {
$(this).parent().remove();
});
});
Also, you should be using those customised collection widgets, which you pass to twig. Nothing fancy, it will be rendered as unordered list with items, to make items easily accessible.
config.yml:
twig:
form:
resources:
- 'ProjectSomeBundle:Form:fields.html.twig'
fields.html.twig:
{% extends 'form_div_layout.html.twig' %}
{% block collection_widget %}
{% import "ProjectSomeBundle:Macro:macro.html.twig" as macro %}
{% spaceless %}
<div class="collection">
{% if prototype is defined %}
{% set attr = attr|merge({'data-prototype': block('prototype_widget') }) %}
{% endif %}
<div {{ block('widget_container_attributes') }}>
<ul>
{% for row in form %}
{{ macro.collection_item_widget(row) }}
{% endfor %}
</ul>
{{ form_rest(form) }}
</div>
<div class="clear"></div>
<button type="button" class="add">{% trans %}Add{% endtrans %}</button>
</div>
<div class="clear"></div>
{% endspaceless %}
{% endblock collection_widget %}
{% block prototype_widget %}
{% spaceless %}
{{ macro.collection_item_widget(prototype) }}
{% endspaceless %}
{% endblock prototype_widget %}
You can notice it uses macro, so here it is:
macro.html.twig
{% macro collection_item_widget(fields) %}
<li>
{% set fieldNum = 1 %}
{% for field in fields %}
<div class="field_{{ fieldNum }}">
{{ form_label(field) }}
{{ form_errors(field) }}
{{ form_widget(field) }}
</div>
{% set fieldNum = fieldNum + 1 %}
{% endfor %}
<button type="button" class="remove">{% trans %}Delete{% endtrans %}</button>
<div class="clear"></div>
</li>
{% endmacro %}
This is a full example, I hope you find it useful and works for you.
I ran into the same issue (my web server crashes, as well, due to too many recursive calls). My quick workaround was to simply create a dummy (cloned) type that doesn't contain the recursive field (this works for me since I was interested only into the 1st level children).
So, if this scenario is applicable to you, as well, you could change your code as follows:
class XType extends AbstractType
{
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder
->add("name", "text", array("label" => "Nom"))
->add("children", "collection", array(
"type" => new XTypeWithoutChildren(),
"by_reference" => false));
}
}
class XTypeWithoutChildren extends XType
{
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder
->add("name", "text", array("label" => "Nom"));
}
}