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
Enhance FieldStore to Return Multiple Errors per Field #169
Comments
This behavior is intentional and probably expected in most cases. However, I agree that this should be configurable or we should switch to your approach in the long run. For now, there is a workaround. You can copy the code from the Valibot adpater and set |
Thank you. I didn't consider just rewriting This is a hacked attempt as making use of domain knowledge that the import { $, implicit$FirstArg, type QRL } from '@builder.io/qwik';
import type {
FieldValues,
FormErrors,
MaybeFunction,
PartialValues,
ValidateForm,
} from '@modular-forms/qwik';
import type { BaseSchema, BaseSchemaAsync } from 'valibot';
/**
* See {@link valiFormWithErrors$}
*/
export function valiFormWithErrorsQrl<TFieldValues extends FieldValues>(
schema: QRL<MaybeFunction<BaseSchema<TFieldValues, any> | BaseSchemaAsync<TFieldValues, any>>>,
): QRL<ValidateForm<TFieldValues>> {
return $(async (values: PartialValues<TFieldValues>) => {
const resolvedSchema = await schema.resolve();
const result = await (typeof resolvedSchema === 'function'
? resolvedSchema()
: resolvedSchema
)._parse(values, { abortPipeEarly: false });
console.log('vali', result);
return result.issues
? result.issues.reduce<FormErrors<TFieldValues>>((errors, issue) => {
const key = issue.path!.map(({ key }) => key).join('.') as keyof FormErrors<TFieldValues>;
const fieldErrors: string[] = (errors[key] as unknown as string[] | undefined) ?? [];
fieldErrors.push(issue.message);
errors[key] = fieldErrors as unknown as string; // Intentionally hide an array as a string
console.log(key, 'issues', errors);
return errors;
}, {})
: ({} as FormErrors<TFieldValues>);
});
}
/**
* Creates a validation functions that parses the Valibot schema of a form.
*
* @param schema A Valibot schema.
*
* @returns A validation function.
*/
export const valiFormWithErrors$ = implicit$FirstArg(valiFormWithErrorsQrl); It works, but obviously isn't something worth proceeding with. My use case is a user registration form with an Email and Password inputs. The two requirements is:
I will continue to watch this space for cleaner implementations, thanks. |
I'm currently working with Valibot and Modular Forms, where the
Field
component'schildren
prop provides aFieldStore
. This store includes anerror: string
property. However, this implementation seems limited as a field might have multiple validation errors, butFieldStore
only returns the first error encountered.This limitation requires additional logic on my end. To display all errors, I need to call
getValues
and then usesafeParse
from Valibot, which is not ideal for development experience. I initially thoughtgetErrors
could be a solution, but it also returns only the first error for each field.For an improved DX, I propose enhancing
FieldStore
to include anerrors: string[] | undefined
property. This change would allow developers to easily access and display all relevant errors for a field.Could this enhancement be considered for a future update?
The text was updated successfully, but these errors were encountered: