JS to Auto-Update the Select Options

I'm wondering how this is different for Symfony 6 and Easy Admin 3/4. Where would I look?

Hey @Courtney-T

What part are you talking about? Anyway, you can check the EasyAdmin docs https://symfony.com/bundles/EasyAdminBundle/current/index.html or perhaps the UPGRADE file may be useful https://github.com/EasyCorp/EasyAdminBundle/blob/4.x/UPGRADE.md

Cheers!

Specifically with regards to needing to inject javascript to update the information live on a form. Or, at the very least on first creation or update. I got the auto update to occur with a BeforeUpdateSubscriber but, no such luck on first persist or create.

I'll try to describe what I'm trying to do. I'm creating a sale writing app. Any number of items can be added to the sale and I need the subtotal, tax, grand total fields to update as items are added. The items are collection fields and the subtotal, tax, grand total fields are number fields.

Hey everyone,
trying to replicate this on Symfony 6 .
The field update by js dynamically work great's , almost .
I got a strange error that the field newly updated aren't submitted in form.
When i debug in a FormEvents::SUBMIT and dump the data , i get only the field that i do not dynamicaly generate...
If someone get the same case ^^

Yo Quentin D.!

Ooof, yea, this stuff is super complex :/. Unfortunately, I can't offer any good suggestions. Have you triple-checked that the dynamically-generated data IS being submitted? Like, if you look at the POST data (you can look at this in your Network tools in your browser, find the request then find the POST data), do you see the dynamically-generated field? Does its name look correct? That's what I would check... but I'm really not sure what could be going wrong.

Cheers!

Hey folks,

I'm trying to replicate this in Symfony 6 using my own classes but trying to pass the non persisted entity to CreateForm is throwing this error:

Entity of type "App\Entity\MyEntity" passed to the choice field must be managed. Maybe you forget to persist it in the entity manager?

Searching has possible causes all over the map. Where does one even begin to solve such a thing?

Notes:

1. There are several EntityType fields that are choices in the form.
2. The field I'm setting from data provided by the endpoint is one of these fields.
3. The data I'm setting on this field is an actual persisted entity resolved in the endpoint.
4. I do see a possible workaround using non persisted fields in the entity but this seems like a bit of a hack.

Thanks!

Hey Aaron,

Are you sure the error is thrown when you pass the entity to the createForm()? You can easily double-check it by putting a dd('stop'); code right after this createForm() call. If you got your dd() - then the problem is somewhere else below. Most probably, you forget to call persist($entity) on your entity before calling flush() and the end of the request when trying to save results to the DB. If so, then the solution would be to call persist($entity) on that "App\Entity\MyEntity" instance before calling flush().

Also, consider that if you have some listeners that may also call flush() - you probably need to call persist() a bit earlier. Just in case, try to call the persist right after you created the entity, does it help?

Cheers!

Figured out why this was happening. The short short version is that my code was trying to set an unpersisted entity onto a form field and it didn't like that for obvious reasons. One mystery solved.

The primary problem I was trying to solve remains elusive but I have to move on so for now I've just introduced a hidden intermediate non persisted text field to set the id of the entity chosen in autocomplete and send that back on form submit. I'll then just grab the proper entity in the controller and set the persisted field right before persisting. I'll circle back around and give it another look later. I find that provides new insight sometimes.

Hopefully one day my understanding of the form system will make this an easy challenge or the process will get easier. Until then thanks for the help!

Hey Aaron,

Yes, your short version about the problem sounds valid, at least that's what I thought from the error you mentioned.

Anyway, I'm happy you were able to find the primary problem and solve it yourself! And thanks for sharing the problem with others.

I believe it should be so, you just need to get used to Symfony Form component. The mot common problem IMO is that people start creating very complex forms (probably because they need them in their projects) without understanding how simple things works, i.e. jump over a few levels. And this lead to the misunderstanding and confusing. But with more practice, it should get better I think, just start with simple forms and complicate them step by step. Also, I'd recommend you to look over all the available options of the specific form type you're going to use in Symfony docs, you may find some good options that will fit in your specific case.

Cheers!

There is no flushing going on in the listener. I did isolate it to when the listener is being added at this line:

`$builder->get('<field that has the data set in the controller endpoint>')->addEventListener(

FormEvents::POST_SUBMIT,
function (FormEvent $event) {`

Maybe it's because I'm setting this listener on the field itself? Perhaps there's a better approach to what I'm trying to accomplish.

1. The field is a self-referential relationship with a parent/child concept. Think if you were modeling for a family tree application.
2. The dataset will be way to big to just do 'options' => <repository>->findall() so autocomplete is being used with a custom query function in the repository.
3. The options in the target field are set to null on initial rendering.
4. The stimulus controller manually adds the option selected by input with the proper id to the HTML select and sets it to selected.

Step 4 initially was causing strange reverse transform errors saying the value that corresponds to the id of the entity the field represents was invalid. So then I tried this method and so here I am.

OK that's interesting how that gets parsed. So that should be get('fieldThatHasTheDataSetInTheControllerEndpoint')

I'm looking for an example, where you fill a select box field ChoiceType, and depending on your choice, we gonna append some form field!

Hey ahmedbhs!

What you're trying to do "might" actually be much easier :). For example, you could choose to ALWAYS include this "extra" form field. Then, via JavaScript, listen to a "change" event on the select element and, if the value matches something, hide/show that "extra" field. This is much simpler than all the form listener magic. The only thing you need to be aware of is that a "bad" user could unhide the "extra" field and put data in it even if they have selected an option that should not have it. However, you could pretty easily "clean that up" in your controller: check to see if the field should have been hidden, and clear out that field (for example, if your form is bound to an entity, then set that extra field's property back to null). There are also fancier ways in the form itself to set the extra field's data back to null if the select field is set to some value, and you can look into that if you care enough about that :).

Let me know if that helps! Cheers!

Phew, that was complex!

I had some trouble with bootstrap select as it always rendered my „response select“ from Twig as display: none... The solution for this was to call .selectpicker() again after the js script was finished so it rendered all selects again. Just in case someone runs into the same problem ;)

Another very strange behaviour: when using the article_form_location class it pushed the whole site into that select-div instead of showing me the Twig-select... Got that fixed by working with Symfony‘s FormID (not working on the article project in the video, but the same refresh logic)

Long story short — thanks a lot for your great tutorials. Keep up the good work please :)

Hi [solved]

/admin/article/location-select?location=

Error 500 (Notice: Undefined index:)
in src/Form/ArticleFormType.php                        (line 145)

        $locationNameChoices = [
            'solar_system' => array_combine($planets, $planets),
            'star' => array_combine($stars, $stars),
            'interstellar_space' => null,
        ];

        return $locationNameChoices[$location];
    }
}

Adding in :

public function getSpecificLocationSelect(Request $request)
    {
        $article = new Article();
        $article->setLocation($request->query->get('location'));


        #dd($article->getLocation());

        if($article->getLocation() === ''){
            return new Response(null, 204);
        }
        
        $form = $this->createForm(ArticleFormType::class, $article);


        // specificLocationName no field? Return an empty response
        if (!$form->has('specificLocationName')) {
            return new Response(null, 204);
        }


        return $this->render('article_admin/_specific_location_name.html.twig', [
            'articleForm' => $form->createView(),
        ]);
    }

Bye!

Hey Emilio,

I'm glad you were able to solve it yourself, well done!

Cheers!

Hi guys,
I'm sorry but I'm little bit confused about using dynamically changing forms. I had few entity classes which extends abstract class. I did for them form which dynamically change form fields depending of field 'type'. Everything works fine when I validate fields inside each form field, but now I need validate few fields depending of another one inside the same form. I think about few solutions:

I. Create FormModels which looks like entities ( each type of model extends one abstract model class by adding to it specific fields). Then get data from form (which data_class is set to null) and by switching options depending of field 'type', bind the data from form to right data model and validate it by using annotations inside FormModels and validatorInterface. In this moment I' m now.

II. Create one big FormModel which had all possible field and add custom constraints which will be check first 'type' field and depending of it require or not each other field. But that idea sounds for me really ugly.

III. Third idea was dynamically changing data_class of form ( for example if 'type' field is set to 'category_b' I add to form required fields like now but in the same time I wanna put data_class from null to specific data model). It will be the best solution to me, but I don't know it is ever possible. If it is can you point me to right direction?

Thank you so much for reply.

Hey Cristóbal,

1st solutions sounds good to me, probably the best on I could think of. You can take a look at validation Callbacks: https://symfony.com/doc/cur... - where you can operate the whole object and so validate a field depends on the value of the other field, etc.

Also, you can look at validation groups, they allow you to use the same model with same fields but with different validation rules for different forms, see https://symfonycasts.com/sc... .

I hope this helps!

Cheers!

Hi Victor,
First of all thanks a lot for your reply, it was very helpful for me because it makes me sure that what I' m doing here it's ok.I resolve the problem with validation depending fields by wrote annotations to specific model which extends abstract model so each model has own validation:

/**
 * @UniqueFieldsPair(
 * fields={"intensity", "name"},
 * errorPath="name",
 * entityClass="MovementActivity",
 * message="The activity with the same name and intensity already exist"
 * )
 */
class MovementActivityFormModel extends AbstractActivityFormModel

It works fine for me, but when I'm editing Activity entity I map data from it to specific model class and bind that model to form. After submit if it's errors inside form and I dump it by $form->getErrors(), each error is mapped to path 'data."propertyName"' for example 'data.name' (not like form expected just 'name') so it didn't pass form->isValid() and errors aren't displayed to user in form view. I improve that by adding following code:

if($request->isMethod('POST')) {
    //dd($form->getErrors());

    $errors = $validator->validate($dataModel);
    if (count($errors) > 0) {
        foreach ($errors as $error) {
            $formError = new FormError($error->getMessage());
            $form->get($error->getPropertyPath())->addError($formError);
        }
    }
}

It provides to display errors in form view but it just duplicates all errors making new with right path.
It's any way to do that better??? I looked at methods inside form to find something which will be helpful in my case (for example change path, or change error method), but didn't find anything like that. Thanks for help.

Hey Cristóbal,

Once again, if you want to operate entities in forms, you better use validation groups, and then specify what validation group use want to use in which form, see the docs for the reference:
https://symfony.com/doc/cur...
https://symfony.com/doc/cur...

This will allow you to use the same entity in different forms but apply different validation rules for each form, and so you can avoid using form model and use real entities in your forms.

But if we're talking about using form model - use them completely and only map the final valid data back to entities. I mean, you create a form model, e.g. MovementActivityFormModel, then create a specific form for it where you specify MovementActivityFormModel as data_class there, and then in controllers create that form and on post request do if ($form->isSubmitted() && $form->isValid()) call. If the form IS NOT valid - Symfony Form component will automatically map all errors to proper form model properties. But if the form model IS valid - only then map data from form model to the entity, basically, you just need do something like $entity->setName($formModel->getName()); and that's it. I think it should work as you expected but with less custom logic.

I hope this helps!

Cheers!

Hey Victor,
Once again, thanks a lot for your reply it was very helpful to me. I knew about your second suggestion but I think I can do It without duplicate similars forms. Your replies clarify possible solutions. Now I know it's two ways to do that what I want to do. First is by doing forms for all available activities forms which takes specific activity form and validate is working by isValid() on form. Second one option is set null to data_class, but this option require more custom validation.

Once again thanks for help.
Cheers :) !

Hey Cristóbal,

Yes, if we're talking about forms - then $form->isValid() is exactly what you need to validate form data. Otherwise, use validator directly only when you need to validate something that does NOT relate to forms.

Thank you for confirming that it was helpful for you, I'm happy now :)

Cheers!

Hi there,

I'm following along, I've also added another drop down to the form as an EntityType (just added to $builder as per normal). The form works when I go to add / edit but I can't get the admin_article_location_select endpoint to work.

So say for example, I have an EntityType a little further down (unrelated at this point) to select the kind of space ship you have using the SpaceShip entity:

$builder
->add('title', TextType::class, [
'help' => 'Choose something catchy!'
])
->add('spaceship', EntityType::class, [
'class' => SpaceShip::class,
'choice_label' => 'spaceShip',
'placeholder' => 'Choose a space ship'
])
</snip>

This is the only change. So far everything works fine until I try and output the API route 'admin_article_location_select' at which point it dies because it can't access properties on the SpaceShip object. The error comes from the create form line in the Article Controller:

$form = $this->createForm(ArticleFormType::class, $article);

Neither the property "spaceShip" nor one of the methods "getSpaceShip()", "spaceShip()", "isSpaceShip()", "hasSpaceShip()", "__get()" exist and have public access in class "App\Entity\SpaceShip".

Have I missed something basic? Do I need to construct the form differently? Any help would be much appreciated.

Thanks!

Hey Dan

Hmm, that's odd. Are you sure you are passing an instance of Article to the form? It seems to me that you are passing an instance of SpaceShip but I may be wrong, I need to see your code

Cheers!

Hello im having a trouble with when submiting a form with added specific location. it renders an error that says

"This form should not contain extra fields."

So the only one working is interstellar space. Do you guys know what causes this? thank you :)

Hey,

Double check your Form fields, you are submitting a field that doesn't belong to your FormType class. You can bypass this error by allowing extra fields to your form but I don't think that's what you want

Cheers!

Great videos, thanks !
Form events and dynamic forms are really complicated and annoying to work with, too bad there is no easier way :p

Hey Leif,

There's still a few more unreleased videos yet... will be released a bit later. Thanks for your feedback! Yeah, it's complex, but probably you can do about 80% of your forms without this complexity I think, but yeah, depends on your project.

Cheers!

It would be cool to see a complex form without using the form component
Do you just manage everything by yourself, get raw data in your controllers and use a lot of JS? :p

Hey Leif,

That would be a headache without Form Component :p

Cheers!