README

Symfony UX 表单集合是一个为 Symfony 表单提供轻量级用户界面的 Symfony 扩展包。

安装

UX 表单集合需要 PHP 7.2+ 和 Symfony 4.4+。

使用 Composer 和 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

同时确保你的 package.json 文件中至少有版本 2.0 的 @symfony/stimulus-bridge

你需要从你正在使用的主题中选择正确的主题

# config/packages/twig.yaml
twig:
  # For bootstrap for example
  form_themes: ['@FormCollection/form_theme_div.html.twig']

你有 2 个不同的主题

• @FormCollection/form_theme_div.html.twig
• @FormCollection/form_theme_table.html.twig

有关在 Symfony 中设置主题的不同方法，请参阅 Symfony 文档

用法

Form Collection 最常见的用法是将其作为原生 CollectionType 类的替代品使用

// ...
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']    
                ],
            ])
            // ...
        ;
    }

    // ...
}

扩展默认行为

Symfony UX 表单集合允许你通过自定义 Stimulus 控制器扩展其默认行为

// 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
    }
}

然后在你的渲染调用中，将你的控制器作为 HTML 属性添加

        $builder
            // ...
            ->add('comments', UXCollectionType::class, [
                // ...
                'attr' => [
                    // Change the controller name 
                    'data-controller' => 'mycollection' 
                ]
            ]);