Comments (10)
Thanks again for your commitment to create an issue! I will update zodForm$
so you can pass a function. Then it should work. I will let you know when the update is available.
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),
})
),
});
from modular-forms.
Thanks for the help! I haven't had a chance to work on it again but I will probably go with your second example.
from modular-forms.
The new version is available. 🎉
from modular-forms.
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 Error: Code(14): Invoking 'use*()' method outside of invocation context.
import {useLexicalScope} from "/node_modules/.pnpm/@[email protected][email protected]/node_modules/@builder.io/qwik/core.mjs?v=7aacb625";
import {z} from "/node_modules/.pnpm/@[email protected][email protected][email protected]/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)
});
}
from modular-forms.
It worked for me. Can you send me your code or a snippet of it?
from modular-forms.
Did you use component$
for your component?
from modular-forms.
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>
</>
);
});
from modular-forms.
@builder.io/qwik": "0.24.0"
@builder.io/qwik-city": "0.7.0"
@modular-forms/qwik": "^0.4.0"
from modular-forms.
I have investigated the problem. When a lexically scoped variable is accessed, Qwik executes useLexicalScope
under the hood. Since validation can be performed at various points outside of an invocation context, this breaks access to those variables and an error is thrown.
Unfortunately, I don't currently have a solution for this. However, I have two workarounds that may work for you. Instead of accessing props
within the formAction$
function, you can pass the whole schema via props
.
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 validate
in useFormStore
with a Zod schema and do the validation via our internal validation functions.
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} />);
from modular-forms.
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.
from modular-forms.
Related Issues (20)
- Qwik formAction with zod preprocess isnt possible HOT 5
- Qwik "special form" file uploading HOT 1
- onFormComplete for modular forms? HOT 3
- Runtime Error with 'FormError' Execution in Development Mode using QwikJS v1.2.6 and ModularForms v0.18.1 HOT 10
- Deno Compatibility? HOT 2
- vue support? HOT 3
- Conflict with dependency HOT 7
- How to validate a specific field when input changes (Solid) HOT 6
- Solid Kobalte Select example not working HOT 14
- Update peer dependencies for qwik HOT 2
- Confirm password and password validation HOT 1
- Qwik - Example to show confirmation dialog before submitting the form HOT 1
- More bugs with getValues HOT 3
- custom validators need some context, any context HOT 5
- defaultFilters HOT 1
- more critical bugs - this time getvalue on object HOT 10
- Bug: Unable to Edit Input in Modular Form in Production Mode (React ) HOT 3
- Are there any plans to add type validation to the "Typebox" library? HOT 1
- Pattern for creating a form component HOT 4
- Error occurring when using Valibot validation. HOT 4
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 modular-forms.