Add the Onlinq Form Collection Bundle to your project with Composer:
composer require @onlinq/form-collection-bundle
If you're using Symfony Flex (enabled by default for new Symfony projects) the bundle will be registered in your project automatically.
Note that Onlinq Form Collection Bundle requires PHP 7.2+ and Symfony 4.4 or Symfony 5.x.
Additionally, you'll need to include the Onlinq Form Collection web components'
JavaScript on your form pages. If you're using Symfony Flex and installed
Symfony's WebpackEncoreBundle
in your project, the assets are automatically
added to your compiled assets through the Stimulus integration of Webpack Encore.
The web components are also available as assets provided by this bundle after
running bin/console assets:install
:
<script src="{{ asset('bundles/onlinqformcollection/onlinq-collection.js') }}"></script>
<!-- Optionally include the CSS on your page -->
<link rel="stylesheet" href="{{ asset('bundles/onlinqformcollection/onlinq-collection.css') }}">
For more information about the JavaScript integration, see the Onlinq Form Collection web components.
The bundle comes with a number of pre-defined form themes that use the Onlinq Form Collection web components. Learn more about using form themes in the Symfony documentation.
-
@OnlinqFormCollection/collection_theme.html.twig
A basic form theme adding support for form collections with custom stylable buttons. -
@OnlinqFormCollection/bootstrap_5_collection_theme.html.twig
A form theme with the appropriate CSS classes for use with version 5 of the Bootstrap CSS Framework. -
@OnlinqFormCollection/bootstrap_4_collection_theme.html.twig
A form theme with the appropriate CSS classes for use with version 4 of the Bootstrap CSS Framework.
To use one of the form themes globally, add it to the Twig Bundle configuration:
# config/packages/twig.yaml
twig:
# ...
form_themes:
- '@OnlinqFormCollection/collection_theme.html.twig'
In addition to custom form themes, the bundle also includes the OnlinqCollectionType
form type class with additional configuration options for dynamic collections
which can be used as a drop-in replacement for the Symfony CollectionType
class.
<?php
namespace App\Form;
use Onlinq\FormCollectionBundle\Form\OnlinqCollectionType;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\Extension\Core\Type\TextType;
use Symfony\Component\Form\FormBuilderInterface;
class UserSurveyType extends AbstractType
{
public function buildForm(FormBuilderInterface $builder, array $options): void
{
$builder
->add('name')
->add('fruits', OnlinqCollectionType::class, [
// Form and regular collection options
'label' => 'Enter your favorite fruits:',
'entry_type' => TextType::class,
'entry_options' => [
'label' => false,
],
'allow_add' => true,
'allow_delete' => true,
// Custom options for OnlinqCollectionType
'allow_move' => true,
'min' => 0,
'max' => 5,
])
;
}
}