Enhance FieldStore to Return Multiple Errors per Field about modular-forms

[fabian-hiller]

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 abortPipeEarly to false. You also need to change the logic so that fields with the same path are not overwritten, but the strings are concatenated.

[Toeler]

Thank you. I didn't consider just rewriting valiForm. Indeed, that gets most of the way there although as you said, you would need to concatenate the errors rather than returning them as an array.

This is a hacked attempt as making use of domain knowledge that the string is actually a string[] | undefined.

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 email field doesn't really matter, as that just has a single validator.
But the password field has a list of constraints, and under the field it shows these constraints and as the user types, each constraint ticks as it passes.

The two requirements is:

1. Like #116 it would be good to validate each of these at different points (email on blur, but password on input)
2. This issue, whereby a field reports all of the errors so that I can compare those against the initial constraints that I calculate (by running a validation against the empty input and getting all of the issues)

I will continue to watch this space for cleaner implementations, thanks.