How to Dynamically Modify Forms Using Form Events

发布于 2015-08-27 16:51:03 | 234 次阅读 | 评论: 0 | 来源: 网络整理

Often times, a form can’t be created statically. In this entry, you’ll learn how to customize your form based on three common use-cases:

Customizing your Form Based on the Underlying Data

Example: you have a “Product” form and need to modify/add/remove a field

based on the data on the underlying Product being edited.
How to dynamically Generate Forms Based on user Data

Example: you create a “Friend Message” form and need to build a drop-down that contains only users that are friends with the current authenticated user.
Dynamic Generation for Submitted Forms

Example: on a registration form, you have a “country” field and a “state” field which should populate dynamically based on the value in the “country” field.

If you wish to learn more about the basics behind form events, you can take a look at the Form Events documentation.

Customizing your Form Based on the Underlying Data¶

Before jumping right into dynamic form generation, hold on and recall what a bare form class looks like:

// src/AppBundle/Form/Type/ProductType.php
namespace AppBundleFormType;

use SymfonyComponentFormAbstractType;
use SymfonyComponentFormFormBuilderInterface;
use SymfonyComponentOptionsResolverOptionsResolver;

class ProductType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder->add('name');
        $builder->add('price');
    }

    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults(array(
            'data_class' => 'AppBundleEntityProduct'
        ));
    }

    public function getName()
    {
        return 'product';
    }
}

注解

If this particular section of code isn’t already familiar to you, you probably need to take a step back and first review the Forms chapter before proceeding.

Assume for a moment that this form utilizes an imaginary “Product” class that has only two properties (“name” and “price”). The form generated from this class will look the exact same regardless if a new Product is being created or if an existing product is being edited (e.g. a product fetched from the database).

Suppose now, that you don’t want the user to be able to change the name value once the object has been created. To do this, you can rely on Symfony’s EventDispatcher system to analyze the data on the object and modify the form based on the Product object’s data. In this entry, you’ll learn how to add this level of flexibility to your forms.

Adding an Event Listener to a Form Class¶

So, instead of directly adding that name widget, the responsibility of creating that particular field is delegated to an event listener:

// src/AppBundle/Form/Type/ProductType.php
namespace AppBundleFormType;

// ...
use SymfonyComponentFormFormEvent;
use SymfonyComponentFormFormEvents;

class ProductType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder->add('price');

        $builder->addEventListener(FormEvents::PRE_SET_DATA, function (FormEvent $event) {
            // ... adding the name field if needed
        });
    }

    // ...
}

The goal is to create a name field only if the underlying Product object is new (e.g. hasn’t been persisted to the database). Based on that, the event listener might look like the following:

// ...
public function buildForm(FormBuilderInterface $builder, array $options)
{
    // ...
    $builder->addEventListener(FormEvents::PRE_SET_DATA, function (FormEvent $event) {
        $product = $event->getData();
        $form = $event->getForm();

        // check if the Product object is "new"
        // If no data is passed to the form, the data is "null".
        // This should be considered a new "Product"
        if (!$product || null === $product->getId()) {
            $form->add('name', 'text');
        }
    });
}

注解

The FormEvents::PRE_SET_DATA line actually resolves to the string form.pre_set_data. FormEvents serves an organizational purpose. It is a centralized location in which you can find all of the various form events available. You can view the full list of form events via the FormEvents class.

Adding an Event Subscriber to a Form Class¶

For better reusability or if there is some heavy logic in your event listener, you can also move the logic for creating the name field to an event subscriber:

// src/AppBundle/Form/Type/ProductType.php
namespace AppBundleFormType;

// ...
use AppBundleFormEventListenerAddNameFieldSubscriber;

class ProductType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder->add('price');

        $builder->addEventSubscriber(new AddNameFieldSubscriber());
    }

    // ...
}

Now the logic for creating the name field resides in it own subscriber class:

// src/AppBundle/Form/EventListener/AddNameFieldSubscriber.php
namespace AppBundleFormEventListener;

use SymfonyComponentFormFormEvent;
use SymfonyComponentFormFormEvents;
use SymfonyComponentEventDispatcherEventSubscriberInterface;

class AddNameFieldSubscriber implements EventSubscriberInterface
{
    public static function getSubscribedEvents()
    {
        // Tells the dispatcher that you want to listen on the form.pre_set_data
        // event and that the preSetData method should be called.
        return array(FormEvents::PRE_SET_DATA => 'preSetData');
    }

    public function preSetData(FormEvent $event)
    {
        $product = $event->getData();
        $form = $event->getForm();

        if (!$product || null === $product->getId()) {
            $form->add('name', 'text');
        }
    }
}

How to dynamically Generate Forms Based on user Data¶

Sometimes you want a form to be generated dynamically based not only on data from the form but also on something else - like some data from the current user. Suppose you have a social website where a user can only message people marked as friends on the website. In this case, a “choice list” of whom to message should only contain users that are the current user’s friends.

Creating the Form Type¶

Using an event listener, your form might look like this:

// src/AppBundle/Form/Type/FriendMessageFormType.php
namespace AppBundleFormType;

use SymfonyComponentFormAbstractType;
use SymfonyComponentFormFormBuilderInterface;
use SymfonyComponentFormFormEvents;
use SymfonyComponentFormFormEvent;
use SymfonyComponentSecurityCoreAuthenticationTokenStorageTokenStorageInterface;

class FriendMessageFormType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('subject', 'text')
            ->add('body', 'textarea')
        ;
        $builder->addEventListener(FormEvents::PRE_SET_DATA, function (FormEvent $event) {
            // ... add a choice list of friends of the current application user
        });
    }

    public function getName()
    {
        return 'friend_message';
    }
}

The problem is now to get the current user and create a choice field that contains only this user’s friends.

Luckily it is pretty easy to inject a service inside of the form. This can be done in the constructor:

private $tokenStorage;

public function __construct(TokenStorageInterface $tokenStorage)
{
    $this->tokenStorage = $tokenStorage;
}

注解

You might wonder, now that you have access to the User (through the token storage), why not just use it directly in buildForm and omit the event listener? This is because doing so in the buildForm method would result in the whole form type being modified and not just this one form instance. This may not usually be a problem, but technically a single form type could be used on a single request to create many forms or fields.

Customizing the Form Type¶

Now that you have all the basics in place you can take advantage of the TokenStorageInterface and fill in the listener logic:

// src/AppBundle/FormType/FriendMessageFormType.php

use SymfonyComponentSecurityCoreAuthenticationTokenStorageTokenStorageInterface;
use DoctrineORMEntityRepository;
// ...

class FriendMessageFormType extends AbstractType
{
    private $tokenStorage;

    public function __construct(TokenStorageInterface $tokenStorage)
    {
        $this->tokenStorage = $tokenStorage;
    }

    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('subject', 'text')
            ->add('body', 'textarea')
        ;

        // grab the user, do a quick sanity check that one exists
        $user = $this->tokenStorage->getToken()->getUser();
        if (!$user) {
            throw new LogicException(
                'The FriendMessageFormType cannot be used without an authenticated user!'
            );
        }

        $builder->addEventListener(
            FormEvents::PRE_SET_DATA,
            function (FormEvent $event) use ($user) {
                $form = $event->getForm();

                $formOptions = array(
                    'class' => 'AppBundleEntityUser',
                    'property' => 'fullName',
                    'query_builder' => function (EntityRepository $er) use ($user) {
                        // build a custom query
                        // return $er->createQueryBuilder('u')->addOrderBy('fullName', 'DESC');

                        // or call a method on your repository that returns the query builder
                        // the $er is an instance of your UserRepository
                        // return $er->createOrderByFullNameQueryBuilder();
                    },
                );

                // create the field, this is similar the $builder->add()
                // field name, field type, data, options
                $form->add('friend', 'entity', $formOptions);
            }
        );
    }

    // ...
}

2.6 新版功能: The TokenStorageInterface was introduced in Symfony 2.6. Prior, you had to use the getToken() method of SecurityContextInterface.

注解

The multiple and expanded form options will default to false because the type of the friend field is entity.

Using the Form¶

Our form is now ready to use and there are two possible ways to use it inside of a controller:

create it manually and remember to pass the token storage to it;

define it as a service.

a) Creating the Form manually¶

This is very simple, and is probably the better approach unless you’re using your new form type in many places or embedding it into other forms:

class FriendMessageController extends Controller
{
    public function newAction(Request $request)
    {
        $tokenStorage = $this->container->get('security.token_storage');
        $form = $this->createForm(
            new FriendMessageFormType($tokenStorage)
        );

        // ...
    }
}

b) Defining the Form as a Service¶

To define your form as a service, just create a normal service and then tag it with form.type.

YAML

# app/config/config.yml
services:
    app.form.friend_message:
        class: AppBundleFormTypeFriendMessageFormType
        arguments: ["@security.token_storage"]
        tags:
            - { name: form.type, alias: friend_message }

XML

<!-- app/config/config.xml -->
<services>
    <service id="app.form.friend_message" class="AppBundleFormTypeFriendMessageFormType">
        <argument type="service" id="security.context" />
        <tag name="form.type" alias="friend_message" />
    </service>
</services>

PHP

// app/config/config.php
$definition = new Definition('AppBundleFormTypeFriendMessageFormType');
$definition->addTag('form.type', array('alias' => 'friend_message'));
$container->setDefinition(
    'app.form.friend_message',
    $definition,
    array('security.token_storage')
);

If you wish to create it from within a controller or any other service that has access to the form factory, you then use:

use SymfonyComponentDependencyInjectionContainerAware;

class FriendMessageController extends ContainerAware
{
    public function newAction(Request $request)
    {
        $form = $this->get('form.factory')->create('friend_message');

        // ...
    }
}

If you extend the SymfonyBundleFrameworkBundleControllerController class, you can simply call:

$form = $this->createForm('friend_message');

You can also easily embed the form type into another form:

// inside some other "form type" class
public function buildForm(FormBuilderInterface $builder, array $options)
{
    $builder->add('message', 'friend_message');
}

Dynamic Generation for Submitted Forms¶

Another case that can appear is that you want to customize the form specific to the data that was submitted by the user. For example, imagine you have a registration form for sports gatherings. Some events will allow you to specify your preferred position on the field. This would be a choice field for example. However the possible choices will depend on each sport. Football will have attack, defense, goalkeeper etc... Baseball will have a pitcher but will not have a goalkeeper. You will need the correct options in order for validation to pass.

The meetup is passed as an entity field to the form. So we can access each sport like this:

// src/AppBundle/Form/Type/SportMeetupType.php
namespace AppBundleFormType;

use SymfonyComponentFormAbstractType;
use SymfonyComponentFormFormBuilderInterface;
use SymfonyComponentFormFormEvent;
use SymfonyComponentFormFormEvents;
// ...

class SportMeetupType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('sport', 'entity', array(
                'class'       => 'AppBundle:Sport',
                'placeholder' => '',
            ))
        ;

        $builder->addEventListener(
            FormEvents::PRE_SET_DATA,
            function (FormEvent $event) {
                $form = $event->getForm();

                // this would be your entity, i.e. SportMeetup
                $data = $event->getData();

                $sport = $data->getSport();
                $positions = null === $sport ? array() : $sport->getAvailablePositions();

                $form->add('position', 'entity', array(
                    'class'       => 'AppBundle:Position',
                    'placeholder' => '',
                    'choices'     => $positions,
                ));
            }
        );
    }

    // ...
}

2.6 新版功能: The placeholder option was introduced in Symfony 2.6 in favor of empty_value, which is available prior to 2.6.

When you’re building this form to display to the user for the first time, then this example works perfectly.

However, things get more difficult when you handle the form submission. This is because the PRE_SET_DATA event tells us the data that you’re starting with (e.g. an empty SportMeetup object), not the submitted data.

On a form, we can usually listen to the following events:

PRE_SET_DATA
POST_SET_DATA
PRE_SUBMIT
SUBMIT
POST_SUBMIT

2.3 新版功能: The events PRE_SUBMIT, SUBMIT and POST_SUBMIT were introduced in Symfony 2.3. Before, they were named PRE_BIND, BIND and POST_BIND.

The key is to add a POST_SUBMIT listener to the field that your new field depends on. If you add a POST_SUBMIT listener to a form child (e.g. sport), and add new children to the parent form, the Form component will detect the new field automatically and map it to the submitted client data.

The type would now look like:

// src/AppBundle/Form/Type/SportMeetupType.php
namespace AppBundleFormType;

// ...
use SymfonyComponentFormFormInterface;
use AppBundleEntitySport;

class SportMeetupType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('sport', 'entity', array(
                'class'       => 'AppBundle:Sport',
                'placeholder' => '',
            ));
        ;

        $formModifier = function (FormInterface $form, Sport $sport = null) {
            $positions = null === $sport ? array() : $sport->getAvailablePositions();

            $form->add('position', 'entity', array(
                'class'       => 'AppBundle:Position',
                'placeholder' => '',
                'choices'     => $positions,
            ));
        };

        $builder->addEventListener(
            FormEvents::PRE_SET_DATA,
            function (FormEvent $event) use ($formModifier) {
                // this would be your entity, i.e. SportMeetup
                $data = $event->getData();

                $formModifier($event->getForm(), $data->getSport());
            }
        );

        $builder->get('sport')->addEventListener(
            FormEvents::POST_SUBMIT,
            function (FormEvent $event) use ($formModifier) {
                // It's important here to fetch $event->getForm()->getData(), as
                // $event->getData() will get you the client data (that is, the ID)
                $sport = $event->getForm()->getData();

                // since we've added the listener to the child, we'll have to pass on
                // the parent to the callback functions!
                $formModifier($event->getForm()->getParent(), $sport);
            }
        );
    }

    // ...
}

You can see that you need to listen on these two events and have different callbacks only because in two different scenarios, the data that you can use is available in different events. Other than that, the listeners always perform exactly the same things on a given form.

One piece that is still missing is the client-side updating of your form after the sport is selected. This should be handled by making an AJAX call back to your application. Assume that you have a sport meetup creation controller:

// src/AppBundle/Controller/MeetupController.php
namespace AppBundleController;

use SymfonyBundleFrameworkBundleControllerController;
use SymfonyComponentHttpFoundationRequest;
use AppBundleEntitySportMeetup;
use AppBundleFormTypeSportMeetupType;
// ...

class MeetupController extends Controller
{
    public function createAction(Request $request)
    {
        $meetup = new SportMeetup();
        $form = $this->createForm(new SportMeetupType(), $meetup);
        $form->handleRequest($request);
        if ($form->isValid()) {
            // ... save the meetup, redirect etc.
        }

        return $this->render(
            'AppBundle:Meetup:create.html.twig',
            array('form' => $form->createView())
        );
    }

    // ...
}

The associated template uses some JavaScript to update the position form field according to the current selection in the sport field:

Twig

{# src/AppBundle/Resources/views/Meetup/create.html.twig #}
{{ form_start(form) }}
    {{ form_row(form.sport) }}    {# <select id="meetup_sport" ... #}
    {{ form_row(form.position) }} {# <select id="meetup_position" ... #}
    {# ... #}
{{ form_end(form) }}

<script>
var $sport = $('#meetup_sport');
// When sport gets selected ...
$sport.change(function() {
  // ... retrieve the corresponding form.
  var $form = $(this).closest('form');
  // Simulate form data, but only include the selected sport value.
  var data = {};
  data[$sport.attr('name')] = $sport.val();
  // Submit data via AJAX to the form's action path.
  $.ajax({
    url : $form.attr('action'),
    type: $form.attr('method'),
    data : data,
    success: function(html) {
      // Replace current position field ...
      $('#meetup_position').replaceWith(
        // ... with the returned one from the AJAX response.
        $(html).find('#meetup_position')
      );
      // Position field now displays the appropriate positions.
    }
  });
});
</script>

PHP

<!-- src/AppBundle/Resources/views/Meetup/create.html.php -->
<?php echo $view['form']->start($form) ?>
    <?php echo $view['form']->row($form['sport']) ?>    <!-- <select id="meetup_sport" ... -->
    <?php echo $view['form']->row($form['position']) ?> <!-- <select id="meetup_position" ... -->
    <!-- ... -->
<?php echo $view['form']->end($form) ?>

<script>
var $sport = $('#meetup_sport');
// When sport gets selected ...
$sport.change(function() {
  // ... retrieve the corresponding form.
  var $form = $(this).closest('form');
  // Simulate form data, but only include the selected sport value.
  var data = {};
  data[$sport.attr('name')] = $sport.val();
  // Submit data via AJAX to the form's action path.
  $.ajax({
    url : $form.attr('action'),
    type: $form.attr('method'),
    data : data,
    success: function(html) {
      // Replace current position field ...
      $('#meetup_position').replaceWith(
        // ... with the returned one from the AJAX response.
        $(html).find('#meetup_position')
      );
      // Position field now displays the appropriate positions.
    }
  });
});
</script>

The major benefit of submitting the whole form to just extract the updated position field is that no additional server-side code is needed; all the code from above to generate the submitted form can be reused.

Suppressing Form Validation¶

To suppress form validation you can use the POST_SUBMIT event and prevent the ValidationListener from being called.

The reason for needing to do this is that even if you set group_validation to false there are still some integrity checks executed. For example an uploaded file will still be checked to see if it is too large and the form will still check to see if non-existing fields were submitted. To disable all of this, use a listener:

use SymfonyComponentFormFormBuilderInterface;
use SymfonyComponentFormFormEvents;
use SymfonyComponentFormFormEvent;

public function buildForm(FormBuilderInterface $builder, array $options)
{
    $builder->addEventListener(FormEvents::POST_SUBMIT, function (FormEvent $event) {
        $event->stopPropagation();
    }, 900); // Always set a higher priority than ValidationListener

    // ...
}

警告

By doing this, you may accidentally disable something more than just form validation, since the POST_SUBMIT event may have other listeners.

Customizing your Form Based on the Underlying Data¶

Adding an Event Listener to a Form Class¶

Adding an Event Subscriber to a Form Class¶

How to dynamically Generate Forms Based on user Data¶

Creating the Form Type¶

Customizing the Form Type¶

Using the Form¶

a) Creating the Form manually¶

b) Defining the Form as a Service¶

Dynamic Generation for Submitted Forms¶

Suppressing Form Validation¶

后端技术

前端技术

数据库

热门框架

常用IDE

其他