Prerequisites

Make sure you load the mf-conditional fields JS library in your project on the pages where you use conditional fields. You can either use script or module, currently the script is executed when mfConditionalFields is available in the global namespace.

If you use a bundler (like Webpack), make sure to implement form initialization.

Example;

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

Installation

Make sure Composer is installed globally, as explained in the installation chapter of the Composer documentation.

Applications that use Symfony Flex

Open a command console, enter your project directory and execute:

composer require martin1982/mfconditionalfieldsbundle

Applications that don't use Symfony Flex

Step 1: Download the Bundle

Open a command console, enter your project directory and execute the following command to download the latest stable version of this bundle:

composer require martin1982/mfconditionalfieldsbundle

Step 2: Enable the Bundle

Then, enable the bundle by adding it to the list of registered bundles in the config/bundles.php file of your project:

// config/bundles.php

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

Step 3: Enable the form theme

When using Twig you can initialize a form with conditional fields using a form_theme setting in your twig config:

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

Usage

On your FormType class implement the ConditionalRulesInterface for easy access to all options. When adding a field using the FormBuilder you can make a field dependent by providing the conditional_options option.

The following options are available:

Name	Type	Description
container	String	The container for the given action
action	String	The action that needs to be performed when the rules apply
logic	String	OR when only one condition needs to be met, AND when all need to be met
rules	Array	Array of rules to check, with at least 1 rule

The rules consist of these options:

Name	Type	Description
name	String	Field name to check
operator	String	Operator used to check field
value	String	Expected value for the rule to apply

Example

In this example the code from the Symfony documentation is used to select if someone is attending. In addition, it'll show a reason text element when a user selects 'Maybe' as an option.

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

Future releases / Contribute

This bundle includes a basic implementation. If you would like to contribute all options of the mf-conditional-fields bundle can be added.

Special thanks

Special thanks to Ali Khallad for creating this JavaScript library.

Martin1982/mfconditionalfieldsbundle