Comments (4)
You should start by setting a LiveProp with the data you want to use in your form (a TestFormStruct instance i guess): https://symfony.com/bundles/ux-live-component/current/index.html#forms
Then, some first questions to maybe give you some ideas / leads #1844
Can you look in the DOM & your browser inspector what is happening ?
When is the error thrown ? What is the initial state ?
Can you submit without changing the field ?
Is your ajax endpoint called ?
Does it work if you use a standard form and not a live one ?
If so, does it work with a Autocomplete with hard-coded choices ?
from ux.
You should start by setting a LiveProp with the data you want to use in your form (a TestFormStruct instance i guess): https://symfony.com/bundles/ux-live-component/current/index.html#forms
Ok, I thought that was optional. I've added it, but unfortunately it hasn't changed anything yet.
When is the error thrown ? What is the initial state ?
When I click in the selection field, a request is sent to the endpoint to load the options. Then the options are displayed and when I select an option, the live component is re-rendered. A request is then sent to the live component and this then fails with a 422 and returns the HTML, which then contains the message “The selected choice is invalid.”. This is the payload that is sent to the endpoint to re-render the live component after I select an option:
{"props":{"initialFormData":{"testField":null},"formName":"test_form","test_form":{"testField":"","save":null,"_token":"..."},"isValidated":false,"validatedFields":[],"@attributes":{"id":"live-3754781061-0"},"@checksum":"..."},"updated":{"test_form.testField":"1","validatedFields":["test_form.testField"]}}
Can you submit without changing the field ?
No, the browser stops me with the message from my second screenshot, because the field is required.
Is your ajax endpoint called ?
Yes, as soon as I click in the field
Does it work if you use a standard form and not a live one ?
Yes, this works, but I need a live form as I need dependent fields in my real case, like in this example.
If so, does it work with a Autocomplete with hard-coded choices ?
Yes, the live form with hardcoded choices works
I found out that I can work around the problem by setting 'required' => false
in my field, adding the following line and then validating the field manually when submitting.
$builder->get('testField')->resetViewTransformers();
But I don't think that's a nice solution.
I think the problem is that the options loaded via Ajax are missing in the ChoiceList of the form field. A special “choice_loader” was used for the Entity Autocomplete, which I think must also be done for the Ajax Autocomplete. But I haven't come up with a solution yet.
from ux.
Maybe try this ? https://github.com/symfony/ux/issues/391#issuecomment-2139592202`
from ux.
Maybe try this ? #391 (comment)
No, unfortunately that doesn't help. In my case, it's not about an entity autocomplete. My custom Ajax endpoint, which loads the options, sends a request to an external API. So it would also be bad to have to call the external API again in a custom “choice_loader” (because of rate limits).
Or should I still do it with the 'required' => false
and the resetViewTransformers
to skip the standard validation and then do it myself when submitting the form? But it would still be nice if there was a clean standard solution for this case that was also documented. It's actually not an unusual case in my opinion.
from ux.
Related Issues (20)
- [Stimulus] Input type "date" and "datetime-local" do not display initial value HOT 3
- [Doc] Little error on form-collection-type demo HOT 4
- [Assetmapper] "importmap:require" downloads a minified version of the base package - sub directories are not included HOT 3
- [LiveComponent] Error on Vector props hydratation HOT 5
- Add the Map component to the UX website HOT 7
- [TwigComponent] Scope of translation domains HOT 8
- [LiveComponent] Stimulus controller inside a Live Component does not rerender HOT 14
- [AutoComplete] the `openOnFocus` option works only on the second focus? HOT 3
- [LiveComponent] [Turbo] "Error: Form responses must redirect to another location" when using a search form inside a Live Component HOT 2
- Unable to load the "Symfony\UX\Icons\IconRenderer" runtime. after update symfony/ux-icons v2.18.1 to v2.19.0 HOT 3
- [Translator] Cache is not warmed anymore
- [LiveComponent] ComponentWithForm prevent onUpdated to be triggered HOT 2
- [Feature Idea] [Turbo Streams] [ux-turbo] Render view as Turbo Stream
- [TwigComponent] Cva in html_extra HOT 3
- [Map] Feature: Mapbox bridge (and searchbox) HOT 3
- [TwigComponents] [Question] Performance hit when passing content to nested component HOT 11
- [LiveComponent] Issue with data-loading and disabled attribute HOT 5
- [TwigComponent] 3rd party anon. components breaks `debug:twig-component` HOT 3
- [TwigComponent] Mention profiler & debug options
- [LiveComponent] Feature Request: Make #[AsLiveComponent] repeatable
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ux.