Nyantekyi
commented
2 months ago Hello... so I have this problem I am trying to use auto forms to solve... I dont know if you can help. In my project I have a profile page where users are expected to provide their current location... and other stuff. This is the zod schema.
export const userprofile=z.object({
username: z.string().min(1).max(150),
first_name:z.string().max(150).min(1),
last_name:z.string().max(150).min(1),
email: z.string().email(),
})
export const phone=z.object({
code:z.number(),
phone: z.string().min(9).max(10)
})
export const address=z.object({
zip:z.string().max(6).nullish(),
zip4:z.string().max(4).nullish(),
line:z.string().min(1).max(50),
line2:z.string().max(50),
lat:z.number().min(-90).max(90).nullish(),
lon: z.number().min(-180).max(180).nullish(),
city:z.number().min(1)
})
export const profileforms=z.object({
user:userprofile,
picture:z.any().refine((file) => file?.size <= MAX_FILE_SIZE, `Max image size is 5MB.`).refine((file) => ACCEPTED_IMAGE_TYPES.includes(file?.type),"Only .jpg, .jpeg, .png and .webp formats are supported."),
bio:z.string().max(500),
birth_date:z.string().date(),
marital_status:z.enum(['Married', 'Divorce', 'Single',]),
occupation: z.array(z.string().uuid()),
address:address,
phone:z.array(phone),
})This is the schema the data base experts from the client. The database provides a list of occupations(pk-uuid),phone code(number), city codes(number)... How do I use auto forms in this case while maintaining the validity of the data... For instance... I want the users to have the freedom of picking any city... in say a combobox(with an api filter) and then only pick the id of the selected value. And also how do I change the nested pattern of the user(in profile) and address(in profile) from an accordion to a group
DanielBello7
pheakdey-vtech
razbakov
Describe the feature
Background
In my vue2 project I used form builder based on json array of fields.
I was looking for similar solution for vue3 projects. I found https://formkit.com/ and it seemed like a good choice in the beginning, but then I encountered:
I am trying to think of some solution that is simple and flexible. For a long time I couldn't decide how to build forms: with js config or with template. With template you can define a custom layout and place multiple inputs (for example "first name" and "last name") in one row. On other hand you can re-use js config in multiple places.
I discovered Building forms with VeeValidate and Zod and I love how Zod makes life easier with validation and types.
When I integrated Form in my new project, I created form builder based on zod schema.
Recently I discovered AutoForm, I love the idea! It's very similar to what I was doing! Amazing!
Problem
Here is example of registration form with AutoForm.
Customization
What I am missing here is:
<FormControl>.componentinfield-configis mapped toINPUT_COMPONENTSin AutoFormField and it limits component only to pre-defined values. It would be great to be able to use any component without changingINPUT_COMPONENTS.v-if="config?.component === 'radio'"to switch between<RadioGroup>and<Select>. But what if I want to use<ButtonGroup>or something else?Configuration
And a smaller issue is 3 configs for one form: schema, field-config and slots. It would be awesome to have a single configuration. zod doesn't let add any additional information in schema, so I was thinking on creating a new type that would allow to integrate zod objects inside of it, for example:
Additional information