SYMFONY FormTypeCollection with various fields - forms

Question

In my project I would like to be able to add a Collection on a Form. I thought about the FormTypeCollection. But the thing is, I need something like that:
A "New" button, at the end of the form and everytime you click on the new, a "mini-form" is added and you have the three input to fill: "name,text,link". I would like it to be stored in the database as artists = [name,text,link] for example. I have no idea how to do that. i don't want to add an Entity Artist because I just need this for display and I don't need it to be stored as an Entity on the database.
My code right now is like that:
protected function configureFormFields(FormMapper $formMapper)
{
$formMapper
->with('Contenu')
->add('published', CheckboxType::class, ['required' => false, 'label' => 'Publier'])
->add('title', TextType::class, ['required' => true, 'label' => 'Titre'])
->add('marketingEtiquette', TextType::class, ['required' => false, 'label' => 'Etiquette Marketing'])
->add('textLink', TextType::class, ['required' => true, 'label' => 'Texte du lien'])
->add('shoppingLink', TextType::class, ['required' => true, 'label' => 'Lien'])
->add('media', ElFinderType::class, array(
'label' => 'Photo',
'instance' => 'form',
'enable' => true,
'required' => true,
'attr' => array('class' => 'form-control')
)
)
->add('position',ChoiceType::class, array(
'label' => 'Position dans la page',
'choices' => array(
'Bloc Artistes' => 'artists',
'Bloc haut de page' => 'top',
'Bloc bas de page' => 'bottom'
)
))
->add('artists',CollectionType::class,array(
'label' => 'Les artistes',
'allow_add' => true,
))
->end();
}
I don't know how to add 3 fields to the field artists and generate them on the add button click. i don't even know if it's possible actually. I also don't know what should be the type 'artists' in the database.
EDIT:
I would have like to do something similar to that, so I don't need to create an Entity nor a FormType:
->add('artists',CollectionType::class,array(
'entry_type' => TextType::class ,
'entry_options' => [
'artistName' => TextType::class,
'artistText' => TextType::class,
'artistLink' => TextType::class,
],
'label' => 'Les artistes',
'allow_add' => true,
'allow_delete' => true,
'delete_empty' => true,
'by_reference' => false
))
But it's not working so I guess I can't. Error:
The current field `artists` is not linked to an admin. Please create one for the target entity : ``
EDIT 2:
I created my ArtistFormType:
class ArtistFormType extends AbstractType
{
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder
->add('artistName', TextType::class, array(
'label' => 'Nom de l\'artiste'
))
->add('artistText', TextType::class, array(
'label' => 'Texte sous l\'artiste'
))
->add('artistLink', TextType::class, array(
'label' => 'Lien vers l\'artiste'
))
;
}
public function configureOptions(OptionsResolver $resolver)
{
$resolver->setDefaults([
'data_class' => null,
]);
}
}
I called it like that:
->add('artists',CollectionType::class,array(
'entry_type' => ArtistFormType::class,
'label' => 'Les artistes',
'allow_add' => true,
'allow_delete' => true,
'delete_empty' => true,
'by_reference' => false
))
But I get the same error:
The current field `artists` is not linked to an admin. Please create one for the target entity : ``

Answer 1

EDIT : This solution is limited to Symfony\Component\Form\Extension\Core\Type\CollectionType, it might be different with the one from Sonata Admin.
You can find some information on this in the documentation.
The "easiest" way to do that, is to create another form (ArtistFormType for example) with the fields you wish to add.
Then in your parent form you add the CollectionType :
$formMapper
// ...
->add('artists', CollectionType::class, [
'entry_type' => ArtistFormType::class,
'label' => 'Artists',
'allow_add' => true,
'allow_delete' => true,
'delete_empty' => true,
'by_reference' => false
])
;
Then if you already have some artists in your entity it will render the ArtistFormType once for each artist.
If you want to add new artists it is a bit trickier and requires some Javascript.
First, render the collection inside an <ul></ul> tag :
<ul class="artists">
{{ form_row(form.artists) }}
</ul>
Following this jsfiddle :
Find the collection and add an "add artist" button to it
<script>
var $addArtistLink = $('Add an artist');
var $newLinkLi = $('<li></li>').append($addArtistLink);
jQuery(document).ready(function() {
// Get the ul that holds the collection of artists
var $collectionHolder = $('ul.artists');
// add the "add a tag" anchor and li to the tags ul
$collectionHolder.append($newLinkLi);
// ...
}
</script>
Add the "click" event with some dom manipulations to add new artists :
jQuery(document).ready(function() {
// ...
// count the current form inputs we have (e.g. 2), use that as the new
// index when inserting a new item (e.g. 2)
$collectionHolder.data('index', $collectionHolder.find(':input').length);
$addArtistLink.on('click', function(e) {
// prevent the link from creating a "#" on the URL
e.preventDefault();
// add a new artist form
addArtistForm($collectionHolder, $newLinkLi);
});
});
function addArtistForm($collectionHolder, $newLinkLi) {
// Get the data-prototype explained earlier
var prototype = $collectionHolder.data('prototype');
// get the new index
var index = $collectionHolder.data('index');
// Replace '$$name$$' in the prototype's HTML to
// instead be a number based on how many items we have
var newForm = prototype.replace(/__name__/g, index);
// increase the index with one for the next item
$collectionHolder.data('index', index + 1);
// Display the form in the page in an li, before the "Add an artist" link li
var $newFormLi = $('<li></li>').append(newForm);
// also add a remove button
$newFormLi.append('x');
$newLinkLi.before($newFormLi);
// handle the removal
$('.remove-artist').click(function(e) {
e.preventDefault();
$(this).parent().remove();
return false;
});
}
Then it should work fine. Of course some changes might be done to fit your project (field names, add the remove button on existing artists, ...).