I've created a page with tabs (using bootstrap), and all tabs have their own form. And they all work well. My problem is when I get a form error, I want to open the tab that the error is on.
My current controller code:
public function add(Request $request, EntityManagerInterface $em): Response {
$this->denyAccessUnlessGranted('ROLE_USER');
$entityAdd = new \App\Entity\add();
$form = $this->createForm(\App\Form\Add::class, $entityAdd);
$form->handleRequest($request);
if ($form->isSubmitted() && $form->isValid()) {
Function in AddFormType.php
public function buildForm(FormBuilderInterface $builder, array $options) {
$builder
->add(...)
->add(...)
->add(...)
->getForm()
;
}
I'm not creating the form myself, I'm using symfony form components but I'm not sure how to modify the form method to add the form hash (eg. /add#list-tab1) to the form method.
{{ form_start(AddForm) }}
{{ form_row(AddForm.name1) }}
{{ form_row(AddForm.name2) }}
{{ form_row(AddForm.save) }}
{{ form_end(AddForm) }}
You can pass the hash with the third parameter of createForm method :
$form = $this->createForm(
\App\Form\Add::class,
$entityAdd,
['action' => '#list-tab1']
);
Then, you can use the setAction() method and retrieve the option in the buildForm() method in your AddFormType.php file:
$builder
->setAction($options['action'])
->add(...)
Note: Using only the hash in the setAction() method (and not the full route), is only working if the form is submitted to the current route.
You'll have to replace #list-tab1 with the real tab id.
You can pass the action directly in the parameters of form_start(), in the Twig template:
{{ form_start(form, { action: '/add#list-tab1' }) }}
See the Symfony doc about this field option.
A Symfony 4 project. I am not able to see ho to code the following spec.
Say I have two entities Alpha and Beta.
When I create an Alpha object alpha, I wish to associate (ManyToMany) to it one or more Beta objects. I know how to render new and edit Forms to do so.
I wish to enrich the AlphaBeta join table with an attribute, say the Cost to associate a Beta to an Alpha. The issue is that I am not able to enrich the forms above as to insert or edit a Cost value, when I create a Alpha object and associate to it a Beta object.
Is there a standard way to code a situation of this kind?
I read that the way to go is to have two OneToMany associations Alpha->AlphaBeta, and Beta->AlphaBeta, but even doing so I am not able to define/render a Form for Alpha as to create a new Alpha object, to associate to it a Beta object (or more) and to assign to such association a Cost value.
Your advise is very welcome. Thanks
Generally, if the relation/association itself should have an attribute, then the many-to-many mapping in doctrine isn't sufficient anymore, since associations can't store additional data. So you correctly note, that you need an extra AlphaBeta entity/class that holds the data. (As already posted by Ali Kazemi, there is a tutorial for this)
But you wonder about how the cost field can be added to your form...
Since the cost is part of the AlphaBeta entity/class in your case, the form field should be in a form type AlphaBetaType that - probably depending on the options provided - should render an AlphaType and/or BetaType sub form, and a cost form field. Custom form themeing can display it in a way, that it doesn't appear as if it was a subform, if that is a concern. (However, it should be noted that custom form theming can be annoying at times...)
In general, the form structure/hierarchy usually very much resembles the entity structure/hierarchy. And only sporadically hiding data or mapping/transforming it to be displayed or handled differently.
Alternatively you can add an unmapped form field and later store that in your AlphaBeta, but that on average isn't simpler, since it involves "manual" handling.
It seems I did find a way, indeed it is pretty straightforward Synfony 4 code.
Hope it could be useful to somebody.
(note: I used php bin/console make:entity/crud/form to write the needed scripts. Below how I needed to modify the code I got from make)
So, say I have Alpha and Beta entities.
I wish to have a form to create a new Alpha object, to associate to it one or more Beta objects, and to fill in a Cost value for each Alpha-Beta association. I want a edit form too.
First I create a new AlphaBeta entity, whose fields are:
/**
* #ORM\ManyToOne(targetEntity="App\Entity\Alpha", inversedBy="alphabetas", cascade={"persist"})
* #ORM\JoinColumn(nullable=false)
*/
private $alpha;
/**
* #ORM\ManyToOne(targetEntity="App\Entity\Beta", inversedBy="betaalphas", cascade={"persist"})
* #ORM\JoinColumn(nullable=false)
*/
private $beta;
/**
* #ORM\Column(type="string", length=255, nullable=true)
*/
private $cost;
Within class Alpha, I need
/**
* #ORM\OneToMany(targetEntity="App\Entity\AlphaBeta", mappedBy="alpha", orphanRemoval=true, cascade={"persist"})
*/
private $alphabetas;
with usual 'getAlphaBeta, addAlphaBeta and removeAlphaBeta methods. (similarly for Beta)
I create usual CRUD controllers for the new AlphaBeta entity. To have an AlphaBeta Form which could be used as a subform too, I define
class `AlphaBetaEmbeddedForm` extends AbstractType {
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder ->add('Beta', EntityType::class, array(
'class' => Beta::class,
'multiple' => false,
'expanded' => true,
'choice_label' => 'betaTitle' ))
->add('cost', TextType::class);
if(empty($options['remove_alpha_field'])) {
$builder->add('Alpha', EntityType::class, array(
'class' => Alpha::class,
'multiple' => false,
'expanded' => true,
'choice_label' => 'alphaTitle'
));}}
public function configureOptions(OptionsResolver $resolver)
{
$resolver->setDefaults([
'data_class' => AlphaBeta::class,
'remove_alpha_field' => false,
]);
}}
remove_alpha_field is the trick that let me use the form above as a subform within a form to create an Alpha object:
class AlphaType extends AbstractType {
public function buildForm(FormBuilderInterface $builder, array $options) {
$builder
->add('alphaTitle')
->add('AlphaBetas', CollectionType::class, array(
'entry_type' => AlphaBetaEmbeddedForm ::class,
'entry_options' => ['label' => true, 'remove_alpha_field' => true],
'allow_add' => true,
'label' => 'Betas',
'by_reference' => false
));}
To render the subforms within the main form, I need some JS, as suggested here, to be inserted within the new.html.twig and edit.html.twig templates for Alpha:
{% block javascripts %} <script type="text/javascript">
jQuery(document).ready(function () {
$("#add-another-collection-widget").click(function(e){
var list = jQuery(jQuery(this).attr('data-list-selector'));
var counter = list.data('widget-counter') | list.children().length;
var newWidget = list.attr('data-prototype');
newWidget = newWidget.replace(/__name__/g, counter);
counter++;
list.data('widget-counter', counter);
var newElem = jQuery(list.attr('data-widget-tags')).html(newWidget);
newElem.appendTo(list);
});});</script>{% endblock %}
To apply the latter, it seems you need to write each single row in the main form template _form.html.twig:
{{ form_start(form) }}
<div class="my-custom-class-for-errors">
{{ form_errors(form) }}
</div>
<div id="alphaTitle">
{{ form_row(form.alphaTitle) }}
</div>
{% if form.AlphaBetas %}
<b>Betas</b> </br></br>
{% for Beta in form.AlphaBetas %}
{% for BetaField in Beta %}
{{ form_row(BetaField) }}
{% endfor %}
{% endfor %}
{% endif %}
<div id="AlphaBeta-fields-list"
data-prototype="{{ form_widget(form.AlphaBetas.vars.prototype)|e }}"
data-widget-tags="{{ '<p></p>' |e }}"
data-widget-counter="{{ form.children|length }}">
{% for AlphaBetaField in form.AlphaBetas.vars.prototype.children %}
{{ form_row(AlphaBetaField) }}
{% endfor %}
</div>
<button type="button" id="add-another-collection-widget" data-list-selector="#AlphaBeta-fields-list">Insert Beta</button>
</br>
<button class="btn">{{ button_label|default('Save') }}</button>
{{ form_end(form) }}
That's all.
Note: within the main form to edit an Alpha object, I would like to insert a delete buttons for each Beta associated object. As much as I can see, it is not possible, since it would mean to insert a html form within an html form. Since I may delete a AlphaBeta association by the corresponding AlphaBeta delete action, it is not a big deal.
If you see how I can improve my code, you are welcome to advise me.
I have been trying to setup a hidden custom field type and a transformer like in this example: https://gist.github.com/bjo3rnf/4061232
What I am trying to accomplish is to pass an entity trough a hidden element, that entity should map the form´s entity but for some reason when it get to the controller it get empty.
Can some one help me on how can I pass an entity trough a form?
Thank you
The solution with the custom type and transformer is probably better, but if you just want a quick hack, you can set your field up as an entity type in the formbuilder
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder
->add('yourField', 'entity', array('class' => 'AppBundle\Entity\YourEntity', 'read_only' => true));
}
and then do something like this in your template:
<input type="hidden" id="{{ form.yourField.vars.id }}"
name="{{ form.yourField.vars.full_name }}"
value="{{ form.yourField.vars.value }}" />
{% do form.yourField.setRendered %}
Note that this has to be at the top of your form, before you invoke form_widget()
I want view 20 same fields (name: matchday) with use "prototype".
I have a code like this:
Form:
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder
->add('matchday', 'collection', array(
'allow_add' => true,
'type' => new MatchdayType(),
))
...
}
and View (Twig):
<form action="{{ path('meet_create') }}" method="post" {{ form_enctype(form) }}>
{% for i in 1..20 %}
{{ form_widget(form.matchday.vars.prototype) }}
{% endfor %}
<p>
<button type="submit">Create</button>
</p>
</form>
but I don' know how use iteration in this code with "prototype" .
thanks
The prototype is only a model that you can use to create new fields in the form's collection, but it's not really a field per say. If you want to display 20 empty fields from the beginning, you have basically two choices:
add 20 empty 'matchday' objects in the form object in your controller before creating the form
use Javascript (jQuery) to add the fields in the view on the client side
The first solution would give something like this:
$meet = new Meet();
for ($i=0; $i < 20; $i++) {
$matchday = new MatchDay();
$meet->getMatchdays->add($matchday);
}
$form = $this->createForm(new MeetType(), $meet);
For the second solution, you have a good example in the Symfony Cookbook about form collection: http://symfony.com/doc/current/cookbook/form/form_collections.html
I would like to make a date clearable in a form (for example, with a little cross). The date field is already filled and I want to clear data. Is there an easy way to do this ?
My date is nullable and the option is set to 'required'=>false.
Here is the form class :
// Namespaces...
class FormRre extends AbstractType
{
public function buildForm(FormBuilder $builder, array $options)
{
// Other $builder->add() properties...
$builder->add('rredatefin', 'date', array('required' => false));
}
public function getName()
{
return 'sn';
}
public function getDefaultOptions(array $options)
{
return array(
'data_class' => 'Creasixtine\AFBundle\Entity\Rre',
);
}
}
And here is the way it is currently displayed :
{% extends 'CreasixtineAFBundle:Default:index.html.twig' %}
{% block main_container %}
{# ... #}
<form action="{{ path('planifier') }}" method="post" {{ form_enctype(form) }}>
{{ form_errors(form) }}
<div class="bloc-input">{{ form_label(form.rredatefin, "Date de réexpédition :") }}
{{ form_widget(form.rredatefin) }}
</div>
<input type="submit" />
</form>
{% endblock %}
Thanks by advance.
EDIT : precisions in answer to How to clear a date in a form (Symfony2)?
I'm not quite sure to understand.
If you made your date nullable and not required, just leave the field empty.
It should be enough.
Am I missing something ?
After comment edit
I'd advice you, as usual, to work with jquery.
And the .val() function in particular.
=> http://api.jquery.com/val/
$('#Devis_tarif_bi_horaire_select').change(function()
{
$('#Devis_tarif_bi_horaire_value').val('')
});
For instance, this little script will clear the input with id=Devis_tarif_bi_horaire_value when a select with id=Devis_tarif_bi_horaire_select is modified.
You may trigger the .val() function with a click on a link (http://api.jquery.com/click/), or anything you want.
Have a nice try.