I haven´t found the solution to manually render a form which contains a collection.
Here is my code in twig:
<ul id="document-fields-list" data-prototype="{{ form_widget(formulario.documentos.vars.prototype)|e }}">
<div><button class="pull-right" href="#" id="add-another-document">Agregar documento</button></div>
{% for documento in formulario.documentos %}
<li>
{{ form_label(documento) }}
{{ form_widget(documento) }}
Eliminar
</li>
{% endfor %}
</ul>
FormType
In your case we need to create formType for PersonaDocumento. Imagine, that this entity has field documentName:
class PersonaDocumentoType extends AbstractType
{
/**
* #param FormBuilderInterface $builder
* #param array $options
* #SuppressWarnings(unused)
*/
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder
->add('documentName', TextType::class, [
'label' => false,
'translation_domain' => 'messages'
])
;
}
/**
* #return string
*/
public function getName()
{
return 'app_persona_documento_type';
}
/**
* #return null|string
*/
public function getBlockPrefix()
{
return 'app_persona_documento';
}
/**
* #param OptionsResolver $resolver
*/
public function configureOptions(OptionsResolver $resolver)
{
$resolver->setDefaults(array(
'data_class' => PersonaDocumento::class,
'csrf_protection' => true,
'validation' => true,
));
}
}
Form that contain collection
Consider you entity Formulario. It has a OneToMany relation to PersonaDocumento. And Form will be:
class FormularioFormType extends AbstractType
{
/**
* #param FormBuilderInterface $builder
* #param array $options
*/
public function buildForm(FormBuilderInterface $builder, array $options)
{
// ...
$builder
->add('documentos', CollectionType::class, [
'entry_type' => PersonaDocumentoType::class,
'entry_options' => [
'label' => false,
],
'label' => false,
'allow_add' => true,
'allow_delete' => true,
'by_reference' => false, // Very important thing!
])
;
}
// ...
}
Widget for collection
We have a form (FormularioFormType) that contain collection of small forms with type PersonaDocumentoType.
New widget you can create in file with standard widgets, and name of the file is fields.html.twig : path_to_your_project/src/AppBundle/Resources/views/Form/fields.html.twig.
Name of the block will be app_persona_documento_widget.
Thus, example of fields.html.twig :
{% trans_default_domain 'messages' %}
{% block app_persona_documento_widget %}
{% spaceless %}
<div class="form-group" {{ block('widget_container_attributes') }}>
<div class="col-sm-12">
{{ form_widget(form.name, {'attr' : { 'placeholder' : 'app.form.label.name'|trans , 'class' : 'form-control' }}) }}
</div>
</div>
{% endspaceless %}
{% endblock app_persona_documento_widget %}
Also pay attention that "app_persona_documento_widget" - assembled from the getBlockPrefix() of you PersonaDocumentoType plus string "_widget"
Register new form themes in config.yml
# Twig Configuration
twig:
debug: '%kernel.debug%'
strict_variables: '%kernel.debug%'
form_themes:
# other form themes
# ...
- 'AppBundle:Form:fields.html.twig'
Render collection in parent form
{{ form_start(formulario_form) }}
<div class="form-group">
<label for="" class="col-sm-2 control-label">
Label
</label>
<div class="col-sm-10 documentos" data-prototype="{{ form_widget(formulario_form.documentos.vars.prototype)|e('html_attr') }}">
{% for document in formulario_form.documentos %}
<div>
{{ form_widget(document) }}
</div>
{% endfor %}
</div>
</div>
<span>
{{ form_errors(formulario_form) }}
</span>
{# Here you can add another fields of form #}
{{ form_end(formulario_form) }}
Of course, you also need buttons: one "Add another document" button and "Remove" buttons for each "Documento" item.
Symfony documentation suggests that we use JavaScript for this purpose.
You can read more here in official docs
Also you can install Ninsuo/symfony-collection - A jQuery plugin that manages adding, deleting and moving elements from a Symfony collection
Related
I made a form with Symfony. I am using CollectionType class in order to send several information from one input that I can duplicate. (see my code below)
The field is missing. I didn't succeed to get a select and choose the language I wanted. Instead I have all code in data-prototype which is unexpected. (see the picture at the bottom)
So here is what I did :
registration.html.twig
{% extends 'base.html.twig' %}
{% block main %}
{{ form_start(userform) }}
{{ form_row(userform.wishedlanguages) }}
<button type="button" id="addwishedlanguage">+ Add language</button>
<button type="button"id="removewishedlanguage">- Delete language </button>
{{ form_row(userform.save }}
{{ form_end(userform) }}
{% endblock %}
UserType.php
<?php
namespace App\Form;
use App\Entity\User;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;
use Symfony\Component\Form\Extension\Core\Type\SubmitType;
use Symfony\Component\Form\Extension\Core\Type\LanguageType;
use Symfony\Component\Form\Extension\Core\Type\CollectionType;
class UserType extends AbstractType
{
public function buildForm(FormBuilderInterface $builder, array $options): void
{
$builder
->add('wishedlanguages', CollectionType::class, [
'entry_type' => LanguageType::class,
'allow_add' => true,
'allow_delete' => true,
'prototype' => true,
'label' => 'Quelle langue souhaites-tu pratiquer ?',
])
->add('save', SubmitType::class, [
'label' => 'Je valide',
])
;
;
}
public function configureOptions(OptionsResolver $resolver): void
{
$resolver->setDefaults([
'data_class' => User::class,
'translation_domain' => 'forms'
]);
}
}
Here is the code I can see in the browser :
I have a simple form with title and content field, however, the content from the Quill editor is not being sent through the form so I used their form-submit example(https://quilljs.com/playground/#form-submit). I'm trying to get the content via $request->request->get() in my Controller but when I dump it, it's null. Here is my code:
FormType:
class MenuType extends AbstractType
{
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder
->add('title', TextType::class, [
'label' => 'Title',
])
->add('content', TextareaType::class, [
'label' => false,
'attr' => [
'class' => 'editor'
]
]);
}
public function configureOptions(OptionsResolver $resolver)
{
$resolver->setDefaults([
'data_class' => Menu::class,
]);
}
}
Form rendering in twig:
{% extends 'admin/shared/layout.html.twig' %}
{% block body %}
<div class="row">
<div class="col-lg-12">
<div class="row">
<h1 class="page-header">{% if item.id %}Edit{% else %}Add{% endif %} menu</h1>
</div>
{{ form_start(form) }}
{{ form_row(form.title) }}
<label>Content</label>
<input name="about" type="hidden">
<div id="editor">
{{ form_row(form.content) }}
</div>
<br>
<button class="btn btn-success" type="submit"><i class="fa fa-save"></i> Save</button>
{{ form_end(form) }}
</div>
</div>
{% endblock %}
{% block javascripts %}
{{ parent() }}
<script src="{{ asset('admin/quill/quill.min.js') }}"></script>
<script>
var editor = new Quill('#editor', {
theme: 'snow',
modules: {
toolbar: toolbarOptions
},
});
var form = document.querySelector('form');
form.onsubmit = function() {
// Populate hidden form on submit
var about = document.querySelector('input[name=about]');
about.value = JSON.stringify(editor.getContents());
};
</script>
{% endblock %}
Not the most beautiful solution, but it works - found it in another similar question about Django (QuillJS doesn't work with textarea)
$('.editor').each(function(i, el) {
var el = $(this), id = 'quilleditor-' + i, val = el.val(), editor_height = 200;
var div = $('<div/>').attr('id', id).css('height', editor_height + 'px').html(val);
el.addClass('d-none');
el.parent().append(div);
var quill = new Quill('#' + id, {
modules: { toolbar: toolbarOptions },
theme: 'snow'
});
quill.on('text-change', function() {
el.val(quill.root.innerHTML);
});
})
I've worked through a few of the Forms-Tutorials on the Symfony-Page (especially How to Embed a Collection of Forms, How To use a Form without a Dataclass & CollectionType Field ).
I'm trying to show a form with multiple lead partners which can be edited and submitted back to the system.
But i get a Twig_Runtime_Error saying: ''Variable "lead_partners" does not exist''.
My Twig:
{% block content %}
<div>
{{ form_start(form) }}
{% for partner in lead_partners %}
{{ form_row(partner.name) }}
{% endfor %}
{{ form_end(form) }}
</div>
{% endblock content %}
My Controller Code:
public function overview(Request $request, \App\Utility\LeadPartnerLoader $LeadPartnerLoader)
{
$leadPartnerList = $LeadPartnerLoader->loadAll();
$form = $this->createFormBuilder($leadPartnerList)
->add('lead_partners', CollectionType::class, [
'entry_type' => LeadPartnerFormType::class,
])->getForm();
$form->handleRequest($request);
if($form->isSubmitted() && $form->isValid())
{
$data = $form->getData();
}
return $this->render(
'lead_partner_overview2.html.twig',
[
'form' => $form->createView()
]);
}
And the Form Type (LeadPartnerFormType):
public function configureOptions(OptionsResolver $resolver)
{
$resolver->setDefaults(array(
'data_class' => LeadPartner::class,
));
}
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder
->add('id', HiddenType::class)
->add('name', TextType::class);
}
$leadPartnerList is of type array.
What am i doing wrong/missing here?
Kind Regards
It seems your action overview soesn't return the lead_partners variable you use in your template.
You can try to do this
return $this->render(
'lead_partner_overview2.html.twig',
[
'form' => $form->createView(),
'lead_partners' => $leadPartnerList, // I gess that's the list you want to loop ?
]);
i need your help please , I want to display my created form in Symfony2. I want to display my created form 92 times becouse i have 92 numbers in my database(every number is a form) , i didn't know how to do it here is my code:
controller:
class DefaultController extends Controller
{
public function QuestionsAction(Request $request)
{
$questions = $this->getDoctrine()->getEntityManager()
->getRepository('Tests\TestsPhpBundle\Entity\Question')
->findAll();
$task = new Question();
$forms = $this->createForm(new QuestionType(), $task);
if ($request->getMethod() == 'POST') {
$forms->bindRequest($request);
if ($forms->isValid())
{
$em = $this->getDoctrine()->getEntityManager();
$em->persist($task);
$em->flush();
}
}
{
return $this->render('TestsTestsPhpBundle:Default:index.html.twig', array(
'questions' => $questions,
'forms' => $forms->createView()
));
}
}
}
my form file:
class QuestionType extends AbstractType
{
public function buildForm(FormBuilder $builder, array $options)
{
$builder
->add('categories', null, array('required' => false,
))
->add('text', 'entity', array(
'class' => 'TestsTestsPhpBundle:Question',
'query_builder' => function($repository) {
return $repository->createQueryBuilder('p')->orderBy('p.id', 'ASC'); },
'property' => 'text'))
;
}
public function getDefaultOptions(array $options)
{
return array(
'data_class' => 'Tests\TestsPhpBundle\Entity\Question',);
}
public function getName()
{
return 'question';
}
}
my twig file:
{% block content %}
<h2>Questions</h2>
{% for question in questions %}
<dl>
<dt>Number</dt>
<dd>{{ question.number }}<dd>
{% for form in forms %}
{{ form_row(forms.categories) }}
{{ form_row(forms.text) }}
</dl>
{% endfor %}
<hr />
{% endfor %}
{% endblock %}
I recommend to read capter: Embedding Controller
http://symfony.com/doc/2.0/book/templating.html
<div id="sidebar">
{% render "AcmeArticleBundle:Article:recentArticles" with {'max': 3} %}
</div>
You can make a for loop within Twig Template and call an action (with parameter if needed) where you render the form. -> QuestionsAction in your case.
This is my file:
<?php
namespace EM\ExpensesBundle\Entity;
use Symfony\Component\Form\FormBuilder;
use Symfony\Component\Form\AbstractType;
class ChooseCatType extends AbstractType
{
public function buildForm(FormBuilder $builder, array $options)
{
$builder->add('name', 'entity', array(
'class' => 'EMMyFriendsBundle:Category',
'property' => 'name',
'empty_value' => 'All items',
'required' => false,
'query_builder' => function ($repository)
{ return $repository->createQueryBuilder('cat')
->select('cat')
->orderBy('cat.name', 'ASC');
}, ));
}
public function getName()
{
return 'choose_category';
}
}
Here I create the form:
namespace EM\ExpensesBundle\Controller;
use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use EM\ExpensesBundle\Entity\Category;
use EM\ExpensesBundle\Entity\ChooseCatType;
class HomeController extends Controller
{
public function indexAction()
{
//Categories
$cat = new Category();
$dd_form = $this->createForm(new ChooseCatType(), $cat);
return $this->render('EMExpensesBundle:Home:index.html.twig', array(
'dd_form' => $dd_form->createView()));
}
}
and template:
{% extends "::base.html.twig" %}
{% block title %}
Expenses
{% endblock %}
{% block body %}
<div class="content">
<p> Choose category: </p>
<form class="cat" action="" method="post" {{ form_enctype(dd_form) }}>
{{ form_widget(dd_form.name) }}
{{ form_rest(dd_form) }}
<input type="submit" value="Show items" />
</form>
Manage Categories
</div>
{% endblock %}
but I get an error:
Fatal error: Declaration of EM\ExpensesBundle\Entity\ChooseCatType::buildForm()
must be compatible with that
of Symfony\Component\Form\FormTypeInterface::buildForm()
in C:\xampp\htdocs\Expenses\src\EM\ExpensesBundle\Entity\ChooseCatType.php
on line 9
Any ideas?
Use FormBuilderInterface in your method signature:
public function buildForm(FormBuilderInterface $builder, array $options)