Replies: 1 comment 3 replies
-
You will need to adjust your schema based on the function createSchema(modifierGroup) {
return z.object({
modifier: z
.array(z.string())
.min(modifierGroup.min, `You must select at least ${modifierGroup.min}`),
productId: z.string(),
quantity: z.number().min(1).max(10),
shareDish: z.array(z.string()).optional(),
sendComments: z.string().optional(),
})
}
// In the component
const productIdSchema = createSchema(modifierGroup);
const [form, fields] = useForm({
id: 'productId',
constraint: getFieldsetConstraint(productIdSchema),
lastSubmission: fetcher.data?.submission,
onValidate({ formData }) {
return parse(formData, { schema: productIdSchema })
},
shouldRevalidate: 'onBlur',
})
// In the action
const modifierGroup = getModifierGroup(...) // Similar to how you get it on the loader
const productIdSchema = createSchema(modifierGroup);
const submission = parse(formData, { schema: productIdSchema }); |
Beta Was this translation helpful? Give feedback.
3 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Hello, im working right now with modifiers and modifierGroups for my restaurant
I'm working on a web application where I have multiple modifierGroups in a form. Each modifierGroup contains checkboxes that could either be required or optional. The requirement is determined by the min attribute of each modifierGroup: if the min value is greater than 0, then the checkboxes in that group should be required.
My issue is that, even though the min attributes indicate that checkboxes from both modifierGroups should be required, the form allows submission if I select checkboxes from only one modifierGroup.
In essence, how can I dynamically enforce that the correct number of checkboxes are selected in each modifierGroup based on their respective min values before allowing form submission?
Beta Was this translation helpful? Give feedback.
All reactions