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.
@@ -25,13 +25,13 @@ export default {
},
code: {
basic: `
-
`,
@@ -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
};
};