stakovicz / ux-collection
UX Form Collection for Symfony Forms
Installs: 265
Dependents: 0
Suggesters: 0
Security: 0
Stars: 6
Watchers: 1
Forks: 3
Open Issues: 0
Language:Twig
Type:symfony-bundle
Requires
- php: >=7.2.5
- symfony/config: ^4.4.17|^5.0
- symfony/dependency-injection: ^4.4.17|^5.0
- symfony/form: ^4.4.17|^5.0
- symfony/http-kernel: ^4.4.17|^5.0
Requires (Dev)
- symfony/framework-bundle: ^4.4.17|^5.0
- symfony/phpunit-bridge: ^5.2
- symfony/twig-bundle: ^4.4.17|^5.0
- symfony/var-dumper: ^4.4.17|^5.0
This package is auto-updated.
Last update: 2024-04-17 20:39:45 UTC
README
Symfony UX Form collection is a Symfony bundle providing light UX for collection in Symfony Forms.
Installation
UX Form Collection requires PHP 7.2+ and Symfony 4.4+.
Install this bundle using Composer and Symfony Flex:
composer require stakovicz/ux-collection
# Don't forget to install the JavaScript dependencies as well and compile
yarn install --force
yarn encore dev
Also make sure you have at least version 2.0 of @symfony/stimulus-bridge
in your package.json
file.
You need to select the right theme from the one you are using :
# config/packages/twig.yaml twig: # For bootstrap for example form_themes: ['@FormCollection/form_theme_div.html.twig']
You have 2 different themes :
@FormCollection/form_theme_div.html.twig
@FormCollection/form_theme_table.html.twig
Check the Symfony doc for the different ways to set themes in Symfony.
Usage
The most common usage of Form Collection is to use it as a replacement of the native CollectionType class:
// ... use Symfony\UX\FormCollection\Form\CollectionType; class BlogFormType extends AbstractType { public function buildForm(FormBuilderInterface $builder, array $options) { $builder // ... ->add('comments', CollectionType::class, [ // ... 'button_add' => [ // Default text for the add button 'text' => 'Add', // Default attr class for the add button 'attr' => ['class' => 'btn btn-outline-primary'] ], 'button_delete' => [ // Default text for the delete button 'text' => 'Remove', // Default class for the delete button 'attr' => ['class' => 'btn btn-outline-secondary'] ], ]) // ... ; } // ... }
Extend the default behavior
Symfony UX Form Collection allows you to extend its default behavior using a custom Stimulus controller:
// mycollection_controller.js import { Controller } from 'stimulus'; export default class extends Controller { connect() { this.element.addEventListener('collection:pre-connect', this._onPreConnect); this.element.addEventListener('collection:connect', this._onConnect); this.element.addEventListener('collection:pre-add', this._onPreAdd); this.element.addEventListener('collection:add', this._onAdd); this.element.addEventListener('collection:pre-delete', this._onPreDelete); this.element.addEventListener('collection:delete', this._onDelete); } disconnect() { // You should always remove listeners when the controller is disconnected to avoid side effects this.element.removeEventListener('collection:pre-connect', this._onPreConnect); this.element.removeEventListener('collection:connect', this._onConnect); } _onPreConnect(event) { // The collection is not yet connected console.log(event.detail.allowAdd); // Access to the allow_add option of the form console.log(event.detail.allowDelete); // Access to the allow_delete option of the form } _onConnect(event) { // Same as collection:pre-connect event } _onPreAdd(event) { console.log(event.detail.index); // Access to the curent index will be added console.log(event.detail.element); // Access to the element will be added } _onAdd(event) { // Same as collection:pre-add event } _onPreDelete(event) { console.log(event.detail.index); // Access to the index will be removed console.log(event.detail.element); // Access to the elemnt will be removed } _onDelete(event) { // Same as collection:pre-delete event } }
Then in your render call, add your controller as an HTML attribute:
$builder // ... ->add('comments', UXCollectionType::class, [ // ... 'attr' => [ // Change the controller name 'data-controller' => 'mycollection' ] ]);