[Form] "form_attr" FormType option documentation #15108
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
carsonbot
changed the title
cristoforocervino
changed the title
cristoforocervino
force-pushed
the
form-attribute
branch
from
fc22dfe to
a828cb9
Compare
javiereguiluz
added
the
Waiting Code Merge
derrabus
added a commit
to symfony/symfony
that referenced
this pull request
Mar 18, 2021
…ino) This PR was squashed before being merged into the 5.3-dev branch. Discussion ---------- [Form] Add "form_attr" FormType option | Q | A | ------------- | --- | Branch? | 5.x | Bug fix? |no | New feature? | yes | Deprecations? | no | Tickets | N/A | License | MIT | Doc PR | [#15108](symfony/symfony-docs#15108) ## What is this about This PR add support for [`form` attribute](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fae-form) to Symfony Form ([browser compatibility](https://caniuse.com/form-attribute)). The `form` attribute allows form elements to override their associated form (which is their nearest ancestor form element by default). This is extremely useful to solve **nested form problem** and allows **form children** to be **rendered outside form tag** while still working as expected. ## New "form_attr" FormType option #### form_attr **type**: `bool` or `string` **default**: `false` If set to `true` on a **root form**, adds [`form` attribute](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fae-form) on every children with their root **form id**. This allows you to render form children outside the form tag and avoid **nested form problem** in some situations while keeping the form working properly. If set to `true` on a **child**, adds [`form` attribute](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fae-form) on it with its **root form id**. This allows you to render **that child** outside the form tag and avoid **nested form problem** in some situations while keeping the form working properly. If root form has no `id` (this may happen by create an *unnamed* form), you can set it to a `string` identifier to be used at `FormView` level to link children and root form anyway. ## Usage on Root Form Example #### Form Type Enable the feature by setting `form_attr` to `true` on the root form. ```php use Symfony\Component\Form\Extension\Core\Type; class ListFilterType extends AbstractType { public function buildForm(FormBuilderInterface $builder, array $options): void { $builder ->add('search', Type\SearchType::class) ->add('orderBy', Type\ChoiceType::class, [ 'choices' => [ // ... ], ]) ->add('perPage', Type\ChoiceType::class, [ 'choices' => [ // ... ], ]) } public function configureOptions(OptionsResolver $resolver): void { $resolver->setDefault('form_attr', true); // <--- Set this to true } } ``` #### Twig The following Twig template **works properly** even if form children are **outside** their form tag ([browser compatibility](https://caniuse.com/form-attribute)). ```twig <div class="header-filters"> {{ form_errors(form) }} {{ form_row(form.search) }} {# has attribute form="list_filter" #} {{ form_row(form.orderBy) }} {# has attribute form="list_filter" #} </div> <!-- --> <!-- Some other HTML content, like a table or even another Symfony form --> <!-- --> <div class="footer-filters"> {{ form_row(form.perPage) }} {# has attribute form="list_filter" #} </div> {{ form_start(form) }} {# id="list_filter" #} {{ form_end(form) }} ``` ✅ Every form elements work properly even outside form tag. ## Usage on Form Child Example Enable the feature by setting `form_attr` to `true` on selected child. ```php use Symfony\Component\Form\Extension\Core\Type; class ListFilterType extends AbstractType { public function buildForm(FormBuilderInterface $builder, array $options): void { $builder ->add('search', Type\SearchType::class) ->add('orderBy', Type\ChoiceType::class, [ 'choices' => [ // ... ], ]) ->add('perPage', Type\ChoiceType::class, [ 'form_attr' => true, // <--- Set this to true 'choices' => [ // ... ], ]) } } ``` #### Twig The following Twig template **works properly** even if `form.perPage` is **outside** form tag ([browser compatibility](https://caniuse.com/form-attribute)). ```twig <div class="header-filters"> {{ form_start(form) }} {# id="list_filter" #} {{ form_errors(form) }} {{ form_row(form.search) }} {{ form_row(form.orderBy) }} {{ form_end(form, {'render_rest': false}) }} </div> <!-- --> <!-- Some other HTML content, like a table or even another Symfony form --> <!-- --> <div class="footer-filters"> {{ form_row(form.perPage) }} {# has attribute form="list_filter" #} </div> ``` ✅ `form.perPage` element work properly even outside form tag. Commits ------- 5f913ce [Form] Add "form_attr" FormType option
symfony-splitter
pushed a commit
to symfony/form
that referenced
this pull request
Mar 18, 2021
…ino) This PR was squashed before being merged into the 5.3-dev branch. Discussion ---------- [Form] Add "form_attr" FormType option | Q | A | ------------- | --- | Branch? | 5.x | Bug fix? |no | New feature? | yes | Deprecations? | no | Tickets | N/A | License | MIT | Doc PR | [#15108](symfony/symfony-docs#15108) ## What is this about This PR add support for [`form` attribute](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fae-form) to Symfony Form ([browser compatibility](https://caniuse.com/form-attribute)). The `form` attribute allows form elements to override their associated form (which is their nearest ancestor form element by default). This is extremely useful to solve **nested form problem** and allows **form children** to be **rendered outside form tag** while still working as expected. ## New "form_attr" FormType option #### form_attr **type**: `bool` or `string` **default**: `false` If set to `true` on a **root form**, adds [`form` attribute](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fae-form) on every children with their root **form id**. This allows you to render form children outside the form tag and avoid **nested form problem** in some situations while keeping the form working properly. If set to `true` on a **child**, adds [`form` attribute](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fae-form) on it with its **root form id**. This allows you to render **that child** outside the form tag and avoid **nested form problem** in some situations while keeping the form working properly. If root form has no `id` (this may happen by create an *unnamed* form), you can set it to a `string` identifier to be used at `FormView` level to link children and root form anyway. ## Usage on Root Form Example #### Form Type Enable the feature by setting `form_attr` to `true` on the root form. ```php use Symfony\Component\Form\Extension\Core\Type; class ListFilterType extends AbstractType { public function buildForm(FormBuilderInterface $builder, array $options): void { $builder ->add('search', Type\SearchType::class) ->add('orderBy', Type\ChoiceType::class, [ 'choices' => [ // ... ], ]) ->add('perPage', Type\ChoiceType::class, [ 'choices' => [ // ... ], ]) } public function configureOptions(OptionsResolver $resolver): void { $resolver->setDefault('form_attr', true); // <--- Set this to true } } ``` #### Twig The following Twig template **works properly** even if form children are **outside** their form tag ([browser compatibility](https://caniuse.com/form-attribute)). ```twig <div class="header-filters"> {{ form_errors(form) }} {{ form_row(form.search) }} {# has attribute form="list_filter" #} {{ form_row(form.orderBy) }} {# has attribute form="list_filter" #} </div> <!-- --> <!-- Some other HTML content, like a table or even another Symfony form --> <!-- --> <div class="footer-filters"> {{ form_row(form.perPage) }} {# has attribute form="list_filter" #} </div> {{ form_start(form) }} {# id="list_filter" #} {{ form_end(form) }} ``` ✅ Every form elements work properly even outside form tag. ## Usage on Form Child Example Enable the feature by setting `form_attr` to `true` on selected child. ```php use Symfony\Component\Form\Extension\Core\Type; class ListFilterType extends AbstractType { public function buildForm(FormBuilderInterface $builder, array $options): void { $builder ->add('search', Type\SearchType::class) ->add('orderBy', Type\ChoiceType::class, [ 'choices' => [ // ... ], ]) ->add('perPage', Type\ChoiceType::class, [ 'form_attr' => true, // <--- Set this to true 'choices' => [ // ... ], ]) } } ``` #### Twig The following Twig template **works properly** even if `form.perPage` is **outside** form tag ([browser compatibility](https://caniuse.com/form-attribute)). ```twig <div class="header-filters"> {{ form_start(form) }} {# id="list_filter" #} {{ form_errors(form) }} {{ form_row(form.search) }} {{ form_row(form.orderBy) }} {{ form_end(form, {'render_rest': false}) }} </div> <!-- --> <!-- Some other HTML content, like a table or even another Symfony form --> <!-- --> <div class="footer-filters"> {{ form_row(form.perPage) }} {# has attribute form="list_filter" #} </div> ``` ✅ `form.perPage` element work properly even outside form tag. Commits ------- 5f913cec74 [Form] Add "form_attr" FormType option
xabbuh
reviewed
Mar 26, 2021
xabbuh
approved these changes
Mar 26, 2021
|
Thank you @cristoforocervino! It's very nice to see both a code feature and related docs. Congratz with your first contribution! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This is the documentation for #40430