Symfony CoP: Form component

Plan
1. Basic usage
2. Validation
3. Custom types
4. Events
5. Data Transformers
6. Form type extensions
7. Rendering overview

Basic usage (Symfony way)
public function createAction(Request $request)
{
$form = $this
->createFormBuilder([])
->add('comment', 'textarea')
->getForm()
;
$form->handleRequest($request);
if ($form->isValid()) {
$data = $form->getData();
// Do what ever you want with the data...
$comment = $data['comment'];
}
return [
'form' => $form->createView(),
];
}

Basic usage (rendering)
# create.html.twig
{{ form_start(form) }}
{{ form_errors(form) }}
{{ form_row(form.comment) }}
<input type="submit" name="Let's go" />
{{ form_end(form) }}

Basic usage (Object instead of array)
public function createOrUpdateAction(Request $request, MyObject $myObject = null)
{
$myObject = $myObject :? new MyObject();
$form = $this
->createFormBuilder($myObject, [
'data_class' => MyObject::class,
])
->getForm()
;
// Do what ever you want with the updated object...
$comment = $myObject->getComment();
}
return [
];
}

Validation
$form = $this->createFormBuilder()
->add('comment', 'textarea', [
'required' => true,
'constraints' => [
new NotBlank(),
],
])
->getForm()
;

Basic usage (Validation on the object)
use SymfonyComponentValidatorConstraints as Assert;
class MyObject
{
/**
* @AssertNotBlank
* @AssertLength(
* min=10,
* minMessage="The comment have to be useful"
* )
*/
private $comment;
// Required methods
public function getComment();
public function setComment($comment);
}

Basic usage (Get validation errors)
...that's rendered for you!
But if you want access to them...
if (!$form->isValid()) {
$errors = form->getErrors();
// `$errors` is an array of `FormError` objects.
}

Hey!
31 built-in types
46 built-in validators

Custom type definition
class MyFormType extends AbstractType
{
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder
;
}
}

Using the Form Type
{
$form = $this->createForm(new MyFormType());
$data = $form->getData();
// Do what ever you want with the data...
$comment = $data['comment'];
}
return [
];
}

Form Type options
{
//! Replace `setDefaultOptions` since Symfony 3.0 /!
public function conﬁgureOptions(OptionsResolver $resolver)
{
$resolver->setRequired(['my-custom-option']);
$resolver->setDefaults(array(
'data_class' => 'AppModelObject',
));
}
}

Form Type as a service
class GenderType extends AbstractType
{
private $genderChoices;
public function __construct(array $genderChoices)
{
$this->genderChoices = $genderChoices;
}
{
'choices' => $this->genderChoices,
));
}
}

Form Type as a service
Register the form type
<service id="app.form.type.gender" class="AppFormTypeGenderType">
<argument>%genders%</argument>
<tag name="form.type" />
</service>
Use the form type
{
{
$builder
->add('gender', GenderType::class)
;
}
}

Events
Or how to dynamically update the FormType based on
data.

Form workflow
It dispatches different events
while handling the requests.
» PRE_SET_DATA
» POST_SET_DATA
» PRE_SUBMIT
» SUBMIT
» POST_SUBMIT

The name field only for a new product
{
// ...
$builder->addEventListener(FormEvents::PRE_SET_DATA, function (FormEvent $event) {
$product = $event->getData();
$form = $event->getForm();
// The product name is only updatable for a new `Product`
if (!$product || null === $product->getId()) {
$form->add('name', TextType::class);
}
});
}

Event subscribers
{
// ...
$builder->addEventSubscriber(new AddNameFieldSubscriber());
}

An event subscriber
class AddNameFieldSubscriber implements EventSubscriberInterface
{
public static function getSubscribedEvents()
{
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', TextType::class);
}
}
}

List based on another field
1. Initial Form Type
{
$builder
->add('sport', EntityType::class, array(
'class' => 'AppBundle:Sport',
'placeholder' => '',
))
;
}

2. Our form modifier
$formModiﬁer = function (FormInterface $form, Sport $sport = null) {
$positions = null === $sport ? array() : $sport->getAvailablePositions();
$form->add('position', EntityType::class, array(
'class' => 'AppBundle:Position',
'placeholder' => '',
'choices' => $positions,
));
};

3. The listeners
$builder->addEventListener(FormEvents::PRE_SET_DATA, function (FormEvent $event) use ($formModifier) {
$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);
});

Normalization flow
1. Model data. Our object returned
by getData().
2. Internal representation, mostly
our model data. Almost never
used by the developer.
3. View data. The data structure
sent to submit().

Using the CallbackTransformer
{
$builder->add('description', TextareaType::class);
$builder->get('description')->addModelTransformer(new CallbackTransformer(function ($originalDescription) {
// transform <br/> to n so the textarea reads easier
return preg_replace('#<brs*/?>#i', "n", $originalDescription);
}, function ($submittedDescription) {
// remove most HTML tags (but not br,p)
$cleaned = strip_tags($submittedDescription, '<br><br/><p>');
// transform any n to real <br/>
return str_replace("n", '<br/>', $cleaned);
}));
}

An integer to an object
1. Our task Form Type
class TaskType extends AbstractType
{
{
$builder
->add('description', TextareaType::class)
->add('issue', TextType::class)
;
}
{
'data_class' => 'AppModelTask'
));
}
// ...
}

2. The transformer
class IssueToNumberTransformer implements DataTransformerInterface
{
private $issueRepository;
public function __construct(IssueRepository $issueRepository) {
$this->issueRepository = $issueRepository;
}
// Two methods to implement...
public function transform($issue);
public function reverseTransform($issueNumber);
}

3. From model to view
public function transform($issue)
{
return null !== $issue ? $issue->getId() : '';
}

3. From view to model
public function reverseTransform($issueNumber)
{
if (empty($issueNumber)) {
return;
}
if (null === ($issue = $this->issueRepository->ﬁnd($issueNumber))) {
throw new TransformationFailedException(sprintf('An issue with number "%s" does not exist!', $issueNumber));
}
return $issue;
}

4. Voilà!
class TaskType extends AbstractType
{
private $issueRepository;
public function __construct(IssueRepository $issueRepository) {
$this->issueRepository = $issueRepository;
}
{
// ...
$builder->get('issue')->addModelTransformer(new IssueToNumberTransformer($this->issueRepository));
}
}

An extension class
class IconTypeExtension extends AbstractTypeExtension
{
public function getExtendedType()
{
return ChoiceType::class;
}
// We can now declare the following methods...
public function conﬁgureOptions(OptionsResolver $resolver);
public function buildForm(FormBuilderInterface $builder, array $options);
public function buildView(FormView $view, FormInterface $form, array $options);
public function ﬁnishView(FormView $view, FormInterface $form, array $options)
}

An optional extra icon
{
{
$resolver->setDefaults([
'icon' => null,
]);
}
}

An optional extra icon
{
public function buildView(FormView $view, FormInterface $form, array $options)
{
$view->vars['icon'] = $options['icon'];
}
}
You'll need to extend the choice_widget block using a form
theme, so you can display an icon when the local icon variable is
defined.

Register the extension
<service
id="app.image_type_extension"
class="AppFormExtensionImageTypeExtension">
<tag name="form.type_extension"
extended-type="SymfonyComponentFormExtensionCoreTypeChoiceType" />
</service>

Using a form theme
{% form_theme form 'form/ﬁelds.html.twig' %}
{# or.. #}
{% form_theme form _self %}
{{ form(form) }}

Example theme
# form/ﬁelds.html.twig
{% block form_row %}
{% spaceless %}
<div class="form_row">
{{ form_label(form) }}
{{ form_errors(form) }}
{{ form_widget(form) }}
</div>
{% endspaceless %}
{% endblock form_row %}

Creating a form theme
Using Twig blocks.
» [type]_row
» [type]_widget
» [type]_label
» [type]_errors
If the given block of type is not found, it will use the parent's
type.

FormType's buildView
class GenderType extends AbstractType
{
private $genderChoices;
public function buildView(FormView $view, FormInterface $form, array $options)
{
$view->vars['genders'] = $this->genderChoices;
}
}

FormType's buildView
# form/ﬁelds.html.twig
{% block gender_widget %}
{% spaceless %}
{# We can use the `gender` variable #}
{% endspaceless %}
{% endblock %}

FormType's ﬁnishView
Called when the children's view is completed.
public function ﬁnishView(FormView $view, FormInterface $form, array $options)
{
$multipart = false;
foreach ($view->children as $child) {
if ($child->vars['multipart']) {
$multipart = true;
break;
}
}
$view->vars['multipart'] = $multipart;
}

Creating a form without name
1. The difference?
Your form properties won't be namespaced
Example: comment instead of my_form[comment]
You might need/want to use it for:
- Legacy applications compatibility
- APIs (with the FOS Rest Body Listener)

Creating a form without name
2. How?
private $formFactory;
public function __construct(FormFactoryInterface $formFactory)
{
$this->formFactory = $formFactory;
}
{
$form = $this->formFactory->createNamed(null, new MyFormType());
// ...
}

Symfony CoP: Form component

Recommended

More Related Content

What's hot (20)

Viewers also liked (9)

Similar to Symfony CoP: Form component (20)

More from Samuel ROZE (8)

Recently uploaded (20)

Symfony CoP: Form component