README

请确保在项目中加载 mf-conditional fields JS 库，用于使用条件字段的页面。您可以使用脚本或模块，当前脚本在全局命名空间中存在 mfConditionalFields 时执行。

如果您使用打包器（如 Webpack），请确保实现表单初始化。

示例

import mfConditionalFields from "mf-conditional-fields";

let initialized = [];

document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('[data-conditional-rules]').forEach((element) => {
        let form = element.closest('form');
        let formId = form.getAttribute('id');

        if (initialized.includes(formId)) {
            return;
        }

        initialized.push(formId);

        mfConditionalFields('#' + formId, {
            debug: process.env.NODE_ENV === 'development',
        });
    });
});

安装

确保全局已安装 Composer，如 Composer 文档中的 安装章节 所述。

使用 Symfony Flex 的应用程序

打开命令行，进入项目目录，并执行

composer require martin1982/mfconditionalfieldsbundle

未使用 Symfony Flex 的应用程序

步骤 1：下载组件

打开命令行，进入项目目录，并执行以下命令以下载此组件的最新稳定版本

composer require martin1982/mfconditionalfieldsbundle

步骤 2：启用组件

然后，通过将其添加到项目 config/bundles.php 文件中注册的组件列表中，来启用组件

// config/bundles.php

return [
    // ...
    Martin1982\MfConditionalFieldsBundle\MfConditionalFieldsBundle::class => ['all' => true],
];

步骤 3：启用表单主题

当使用 Twig 时，您可以通过在 twig 配置中使用 form_theme 设置来初始化具有条件字段的表单

twig:
    form_themes: ['@MfConditionalFields/conditional_field.html.twig']

用法

在您的 FormType 类中实现 ConditionalRulesInterface 以方便访问所有选项。当使用 FormBuilder 添加字段时，您可以通过提供 conditional_options 选项来使字段依赖于条件。

以下选项可用

规则由这些选项组成

示例

在此示例中，使用 Symfony 文档中的代码来选择是否有人参加。此外，当用户选择 '可能' 作为选项时，它将显示一个原因文本元素。

<?php

declare(strict_types=1);

namespace App\Form;

use Martin1982\MfConditionalFieldsBundle\Rules\ConditionalRulesInterface;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
use Symfony\Component\Form\Extension\Core\Type\TextType;
use Symfony\Component\Form\FormBuilderInterface;


class AttendType extends AbstractType implements ConditionalRulesInterface
{
    public function buildForm(FormBuilderInterface $builder, array $options): void
    {
        $builder
            ->add('isAttending', ChoiceType::class, [
                'choices'  => [
                    'Maybe' => 2,
                    'Yes' => 1,
                    'No' => 0,
                ],
            ])
            ->add('reason', TextType::class, [
                'conditional_options' => [
                    'container' => 'reason-container',
                    'action' => self::ACTION_SHOW,
                    'logic' => self::LOGIC_OR,
                    'rules' => [
                        [
                            'name' => 'isAttending',
                            'operator' => self::OPERATOR_IS,
                            'value' => '2',
                        ],
                    ],
                ],
            ])
        ;    
    }
}

未来版本 / 贡献

此组件包含基本实现。如果您想贡献，可以添加 mf-conditional-fields 组件的所有选项。

特别感谢

特别感谢 Ali Khallad 创建此 JavaScript 库。