Dynamic form fields from database based on field value
Hi, I'm struggling to find a solution were I have a form with a field that determines what other fields to display based on the database tables.
For example,
Field: Asset Type = enum
On field selection, get attribute field definitions from db and display attribute fields
[{name: foo, type: number, default_value: 1}]
Since the schema and default values for the form are defined up front, is it possible to do this in a single form, or do I need to nest the attributes as a separate form? If so, how could I combine the forms state on submit?
10 Replies
sensitive-blue•5d ago
it's certainly doable, but you'll basically lose all type safety since it could be any field of any type
plain-purpleOP•5d ago
Do you have a suggested approach?
sensitive-blue•5d ago
in field composition, you can infer what field type you expect. Using that, you can create the ones you will use (number, string, nullable string etc)
when receiving the fields from the backend, you can type the defaultValues as
Record<string, unknown>
with the AppField of the specified field name, you can then dynamically choose which field component you display based on what the associated field type isplain-purpleOP•5d ago
Thanks. Let me dig in. I've tried something similar but was struggling to get the default values and validating the form for the submit button - it would remain disabled even with valid fields
sensitive-blue•5d ago
this assumes each name is unique. You‘ll have to parse your array to something better for forms, or you preserve the array and ditch the naming convention
if you can create a stackblitz with basic data, I can help figure out a good solution
plain-purpleOP•5d ago
Ok, thanks. Let me get back to you
plain-purpleOP•4d ago
Ok.. I'm getting a little tangled lol, but here's the stackblitz. The idea is to fetch the linked attributes to the asset selected and display the fields using the config from the db (or obj in this case). On submit, the values are stored as key-value within the asset. It's not properly reacting to the asset change, but when I do, it breaks the validation and canSubmit logic. https://stackblitz.com/edit/tanstack-form-ffvdcc23?file=src%2Ffeatures%2Fpeople%2Fpage.tsx
StackBlitz
Form Large Form Example (duplicated) - StackBlitz
Run official live example code for Form Large Form, created by Tanstack on StackBlitz
plain-purpleOP•4d ago
I made some updates and with help from bolt, I think its working. Let me know if you see any issues or improvements
sensitive-blue•4d ago
nice! I'll see if I can review it today or tomorrow
plain-purpleOP•3d ago
One issue i'm having translating this to my project using TS query for the attribute definitions is getting the attribute definitions to define the form validation when it requires the form state - The whole chicken before the egg thing
I'm close.. It's working on my end with defaults values and no longer seeing uncontrolled state errors. Would like to replace the api fetch with TS query, but should be pretty good overall. I put my working code in src/examples folder. It wont run in the stackblitz, but it gives more context. Only type error i can't figure out is on the form.AppField calls and the any's for the field props
One thing that appeared to help was swapping withForm to use useFormContext. Not sure why though