Download the PHP package symfonycasts/dynamic-forms without Composer

Dynamic / Dependent Symfony Form Fields

NOTE: This package is currently experimental. It seems to work great - but forms are complex! If you find a bug, please open an issue!

Ever have a form field that depends on another?

You can find a Demo with LiveComponent on Symfony UX.

• Show a field only if another field is set to a specific value;
• Change the options of a field based on the value of another field;
• Have multiple-level dependencies (e.g. field A depends on field B which depends on field C).

Installation

Install the package with:

Done - you're ready to build dynamic forms!

Usage

Setting up a dependent field is two parts:

1. Usage in PHP - set up your Symfony form to handle the dynamic fields;
2. Updating the Frontend - adding code to your frontend so that when one field changes, part of the form is re-rendered.

Usage in PHP

Start by wrapping your FormBuilderInterface with a DynamicFormBuilder:

DynamicFormBuilder has all the same methods as FormBuilderInterface plus one extra: addDependent(). If a field depends on another, use this method instead of add()

The addDependent() method takes 3 arguments:

1. The name of the field to add;
2. The name (or names) of the field that this field depends on;
3. A callback that will be called when the form is submitted. This callback receives a DependentField object as the first argument then the value of each dependent field as the next arguments.

Behind the scenes, this works by registering several form event listeners. The callback be executed when the form is first created (using the initial data) and then again when the form is submitted. This means that the callback may be called multiple times.

Rendering the field is the same - just be sure to make sure the field exists if it's conditionally added:

Updating the Frontend

In the previous example, when the rating field changes, the form (or part of the form) needs to be re-rendered so the badRatingNotes field can be added.

This library doesn't handle this for you, but here are the 2 main options:

A) Use Live Components

This is the easiest method: by rendering your form inside a live component, it will automatically re-render when the form changes.

B) Use Symfony UX Turbo

If you are already using Symfony UX Turbo on your website, you can have a dynamic form running quickly without any JavaScript.

Or you may want to install Symfony UX Turbo, check out the documentation.

[!NOTE] You only need to have Turbo Frame, you can disable Turbo Drive if you do not use it, or do not want to use it. ie: Turbo.session.drive = false;

Simply add a <turbo-frame> around your form:

From here you need two small changes:

First, in your form type:

• You need to add an attribute on the choice field, so it auto-submits the form when changed (may need to be adapted to your own form if more complex)
• Add a submit button, so in the controller you can differenciate from an auto-submit versus a user action

Second, in your controller:

• Specify the action on your form, this is needed for Turbo Frame
• Handle the auto-submit by checking if the button has been clicked

C) Write custom JavaScript

If you're not using Live Components, nor Turbo Frames, you'll need to write some custom JavaScript to listen to the change event on the rating field and then make an AJAX call to re-render the form. The AJAX call should submit the form to its usual endpoint (or any endpoint that will submit the form), take the HTML response, extract the parts that need to be re-rendered and then replace the HTML on the page.

This is a non-trivial task and there may be room for improvement in this library to make this easier. If you have ideas, please open an issue!