-
-
Notifications
You must be signed in to change notification settings - Fork 44
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Ability to pass dynamic values into Zod schema (qwik) #38
Comments
Thanks again for your commitment to create an issue! I will update const productForm = useFormStore<ProductForm>({
loader,
validate: zodForm$(() => // Here is the difference
z.object({
qty: z.coerce
.number()
.min(props.min)
.max(props.max)
.multipleOf(props.multipleOf),
})
),
}); |
The new version is available. 🎉 |
I updated to the latest version and implemented the code as you wrote in a previous comment but when the validation triggers I get error import {useLexicalScope} from "/node_modules/.pnpm/@builder.io+qwik@0.24.0_undici@5.21.0/node_modules/@builder.io/qwik/core.mjs?v=7aacb625";
import {z} from "/node_modules/.pnpm/@builder.io+qwik-city@0.7.0_@builder.io+qwik@0.24.0/node_modules/@builder.io/qwik-city/index.qwik.mjs?v=7aacb625";
export const qty_input_component_loginForm_useFormStore_zodForm_uLT58SNrVtg = ()=>{
const [props] = useLexicalScope(); // <----------- ERROR POINTS HERE
return z.object({
qty: z.coerce.number().min(props.min).max(props.max).multipleOf(props.multipleOf)
});
} |
It worked for me. Can you send me your code or a snippet of it? |
Did you use |
This is the exact code import { component$, useSignal } from '@builder.io/qwik';
import { zodForm$, Field, useFormStore } from '@modular-forms/qwik';
import { z } from '@builder.io/qwik-city';
import clsx from 'clsx';
interface Props {
min: number;
max: number;
multipleOf: number;
}
type QtyForm = { qty: number };
export default component$<Props>((props) => {
const loader = useSignal<QtyForm>({
qty: 1,
});
const productForm = useFormStore<QtyForm>({
loader,
validate: zodForm$(() =>
z.object({
qty: z.coerce
.number()
.min(props.min)
.max(props.max)
.multipleOf(props.multipleOf),
}),
),
validateOn: 'input',
});
return (
<>
<Field of={productForm} name="qty">
{(field, fieldProps) => (
<>
<input
{...fieldProps}
value={field.value}
class={clsx('form-input')}
type="text"
inputMode="numeric"
autoComplete="off"
/>
<div>Error: {field.error}</div>
</>
)}
</Field>
</>
);
}); |
|
I have investigated the problem. When a lexically scoped variable is accessed, Qwik executes Unfortunately, I don't currently have a solution for this. However, I have two workarounds that may work for you. Instead of accessing import { $, component$, type QRL } from '@builder.io/qwik';
import { Field, useFormStore, zodFormQrl } from '@modular-forms/qwik';
import { z, type ZodType } from 'zod';
interface Props {
schema: QRL<ZodType<any, any, any>>;
}
type QtyForm = { qty: number };
export const YourForm = component$<Props>((props) => {
const productForm = useFormStore<QtyForm>({
loader: { value: { qty: 1 } },
validate: zodFormQrl(props.schema),
validateOn: 'input',
});
return (
<Field of={productForm} name="qty">
{(field, fieldProps) => (
<>
<input
{...fieldProps}
value={field.value}
class="form-input"
type="text"
inputMode="numeric"
autoComplete="off"
/>
<div>Error: {field.error}</div>
</>
)}
</Field>
);
});
export default component$(() => (
<YourForm
schema={$(
z.object({
qty: z.coerce.number().min(1).max(2).multipleOf(5),
})
)}
/>
)); The second workaround is to forego import { component$ } from '@builder.io/qwik';
import {
custom$,
Field,
maxNumber,
minNumber,
useFormStore,
} from '@modular-forms/qwik';
interface Props {
min: number;
max: number;
multipleOf: number;
}
type QtyForm = { qty: number };
export const YourForm = component$<Props>((props) => {
const productForm = useFormStore<QtyForm>({
loader: { value: { qty: 1 } },
validateOn: 'input',
});
return (
<Field
of={productForm}
name="qty"
validate={[
minNumber(props.min, 'Number too small!'),
maxNumber(props.max, 'Number too big!'),
custom$(
(value) => !!value && value % props.multipleOf === 0,
`Not a multiple of ${props.multipleOf}.`
),
]}
>
{(field, fieldProps) => (
<>
<input
{...fieldProps}
value={field.value}
class="form-input"
type="text"
inputMode="numeric"
autoComplete="off"
/>
<div>Error: {field.error}</div>
</>
)}
</Field>
);
});
export default component$(() => <YourForm min={2} max={20} multipleOf={5} />); |
I am unsure if I should reopen the issue, as I don't currently know if there is a solution to this problem. However, if there is any sign of it, I will definitely reopen it. |
Thanks for the help! I haven't had a chance to work on it again but I will probably go with your second example. |
I have a product form component and some products have different validation rules.
I've tried passing props directly into the zod schema but I get error
Internal server error: Qrl($) scope is not a function, but it's capturing local identifiers: props
. Would something like this be doable?The text was updated successfully, but these errors were encountered: