diff --git a/apps/showcase/doc/forms/StatesDoc.vue b/apps/showcase/doc/forms/StatesDoc.vue index cfda8435d..311590577 100644 --- a/apps/showcase/doc/forms/StatesDoc.vue +++ b/apps/showcase/doc/forms/StatesDoc.vue @@ -3,13 +3,13 @@

Form uses the name property to create a state object for tracking values, errors, and actions.

-
+
-
{{ $form }}
+
{{ $form }}
@@ -25,13 +25,13 @@ export default { }, code: { basic: ` -
+
-
{{ $form }}
+
{{ $form }}
`, @@ -99,10 +99,14 @@ export default { }, methods: { resolver: ({ values }) => { - const errors = {}; + const errors = { username: [] }; if (!values.username) { - errors.username = [{ message: 'Username is required.' }]; + errors.username.push({ type: 'required', message: 'Username is required.' }); + } + + if (values.username?.length < 3) { + errors.username.push({ type: 'minimum', message: 'Username must be at least 3 characters long.' }); } return { diff --git a/packages/form/src/form/Form.d.ts b/packages/form/src/form/Form.d.ts index 94cd71a14..138019c9c 100644 --- a/packages/form/src/form/Form.d.ts +++ b/packages/form/src/form/Form.d.ts @@ -72,14 +72,29 @@ export interface FormPassThroughAttributes { [key: string]: any; } +/** + * Resolver options for Form component. + */ +export interface FormResolverOptions { + /** + * The values of the form fields. + */ + values: Record; + /** + * The names of the form fields. + */ + names: string[] | undefined; +} + /** * Defines valid properties in Form component. */ export interface FormProps { /** * A function that resolves validation logic. + * @param {FormResolverOptions} e - Resolver options */ - resolver?: (values: Record) => Promise> | Record | undefined; + resolver?: (e: FormResolverOptions) => Promise> | Record | undefined; /** * The initial values for the form fields. */ diff --git a/packages/form/src/useform/index.d.ts b/packages/form/src/useform/index.d.ts index 5f46b1d73..956708321 100644 --- a/packages/form/src/useform/index.d.ts +++ b/packages/form/src/useform/index.d.ts @@ -7,8 +7,13 @@ export interface useFormReturn { states: any; } +export interface useFormResolverOptions { + values: Record; + names: string[] | undefined; +} + export interface useFormOptions { - resolver?: (values: Record) => Promise> | Record | undefined; + resolver?: (e: useFormResolverOptions) => Promise> | Record | undefined; initialValues?: Record | undefined; validateOnValueUpdate?: boolean | string[]; validateOnBlur?: boolean | string[]; diff --git a/packages/form/src/useform/index.js b/packages/form/src/useform/index.js index db1fe7a0b..372f67a0f 100644 --- a/packages/form/src/useform/index.js +++ b/packages/form/src/useform/index.js @@ -84,13 +84,14 @@ export const useForm = (options = {}) => { }; const validate = async (field) => { + const names = Object.keys(states) ?? []; const values = Object.entries(states).reduce((acc, [key, val]) => { acc[key] = val.value; return acc; }, {}); - const result = (await options.resolver?.({ values })) ?? {}; + const result = (await options.resolver?.({ values, names })) ?? {}; for (const sField of Object.keys(states)) { if (sField === field || !field) { @@ -118,7 +119,7 @@ export const useForm = (options = {}) => { handleSubmit, validate, reset, - valid: toValue(valid), - states: toValue(states) + valid, + states }; };