name:
-
-
- {{ error?.fields['name'][0].message }}
+
+
+ {{ errorFields.name[0].message }}
age:
-
-
- {{ error?.fields['age'][0].message }}
+
+
+ {{ errorFields.age[0].message }}
-
+
diff --git a/packages/integrations/useAsyncValidator/index.test.ts b/packages/integrations/useAsyncValidator/index.test.ts
index 8a437cca008..caa26189426 100644
--- a/packages/integrations/useAsyncValidator/index.test.ts
+++ b/packages/integrations/useAsyncValidator/index.test.ts
@@ -29,11 +29,11 @@ describe('useAsyncValidator', () => {
type: 'number',
},
}
- const { pass, error, isFinished, then } = useAsyncValidator(form, rules)
+ const { pass, errors, isFinished, then } = useAsyncValidator(form, rules)
then(() => {
expect(isFinished.value).toBe(true)
expect(pass.value).toBe(true)
- expect(error.value).toMatchObject([])
+ expect(errors.value).toMatchObject([])
})
})
@@ -46,15 +46,15 @@ describe('useAsyncValidator', () => {
type: 'number',
},
}
- const { pass, error, isFinished, then } = useAsyncValidator(form, rules)
+ const { pass, errors, isFinished, then } = useAsyncValidator(form, rules)
expect(isFinished.value).toBe(false)
expect(pass.value).toBe(false)
- expect(error.value).toMatchObject([])
+ expect(errors.value).toMatchObject([])
then(() => {
expect(isFinished.value).toBe(true)
expect(pass.value).toBe(true)
- expect(error.value).toMatchObject([])
+ expect(errors.value).toMatchObject([])
})
})
@@ -67,10 +67,10 @@ describe('useAsyncValidator', () => {
type: 'number',
},
}
- const { pass, error, isFinished } = await useAsyncValidator(form, rules)
+ const { pass, errors, isFinished } = await useAsyncValidator(form, rules)
expect(isFinished.value).toBe(true)
expect(pass.value).toBe(true)
- expect(error.value).toMatchObject([])
+ expect(errors.value).toMatchObject([])
})
it('should fail to validate', async() => {
@@ -85,10 +85,10 @@ describe('useAsyncValidator', () => {
type: 'number',
},
}
- const { pass, error, isFinished } = await useAsyncValidator(form, rules)
+ const { pass, errors, isFinished } = await useAsyncValidator(form, rules)
expect(isFinished.value).toBe(true)
expect(pass.value).toBe(false)
- expect(error.value).toMatchInlineSnapshot('[Error: Async Validation Error]')
+ expect(errors.value).toMatchInlineSnapshot('[Error: Async Validation Error]')
})
it('should reactive', async() => {
@@ -109,10 +109,10 @@ describe('useAsyncValidator', () => {
},
}) as Ref
- const { pass, error, isFinished } = await useAsyncValidator(form, rules)
+ const { pass, errors, isFinished } = await useAsyncValidator(form, rules)
expect(isFinished.value).toBe(true)
expect(pass.value).toBe(false)
- expect(error.value).toMatchInlineSnapshot('[Error: Async Validation Error]')
+ expect(errors.value).toMatchInlineSnapshot('[Error: Async Validation Error]')
form.value.name = 'okxiaoliang4'
expect(isFinished.value).toBe(false)
diff --git a/packages/integrations/useAsyncValidator/index.ts b/packages/integrations/useAsyncValidator/index.ts
index 7d897b89514..64cee3ef2ea 100644
--- a/packages/integrations/useAsyncValidator/index.ts
+++ b/packages/integrations/useAsyncValidator/index.ts
@@ -3,7 +3,7 @@ import { until } from '@vueuse/shared'
import Schema from 'async-validator'
import type { Rules, ValidateError } from 'async-validator'
import type { Ref } from 'vue-demi'
-import { ref, unref, watchEffect } from 'vue-demi'
+import { computed, ref, unref, watchEffect } from 'vue-demi'
type AsyncValidatorError = Error & {
errors: ValidateError[]
@@ -12,8 +12,10 @@ type AsyncValidatorError = Error & {
interface UseAsyncValidatorReturn {
pass: Ref
- error: Ref
+ errorInfo: Ref
isFinished: Ref
+ errors: Ref
+ errorFields: Ref
}
/**
@@ -22,21 +24,23 @@ interface UseAsyncValidatorReturn {
* @see https://vueuse.org/useAsyncValidator
*/
export function useAsyncValidator(value: MaybeRef>, rules: MaybeRef): UseAsyncValidatorReturn & PromiseLike {
- const error = ref()
+ const errorInfo = ref()
const isFinished = ref(false)
const pass = ref(false)
+ const errors = computed(() => errorInfo.value?.errors || [])
+ const errorFields = computed(() => errorInfo.value?.fields || {})
watchEffect(async() => {
isFinished.value = false
+ pass.value = false
const validator = new Schema(unref(rules))
try {
await validator.validate(unref(value))
pass.value = true
- error.value = null
+ errorInfo.value = null
}
catch (err) {
- error.value = err as AsyncValidatorError
- pass.value = false
+ errorInfo.value = err as AsyncValidatorError
}
finally {
isFinished.value = true
@@ -46,7 +50,9 @@ export function useAsyncValidator(value: MaybeRef>, rules: M
const shell = {
pass,
isFinished,
- error,
+ errorInfo,
+ errors,
+ errorFields,
} as UseAsyncValidatorReturn
function waitUntilFinished() {
From 0573f25f7a0f69571f31c8b4c36c24d1346c3230 Mon Sep 17 00:00:00 2001
From: okxiaoliang4 <353742991@qq.com>
Date: Fri, 15 Apr 2022 21:45:13 +0800
Subject: [PATCH 3/6] test(useAsyncValidator): update
---
.../useAsyncValidator/index.test.ts | 23 +++++++++++++++----
1 file changed, 19 insertions(+), 4 deletions(-)
diff --git a/packages/integrations/useAsyncValidator/index.test.ts b/packages/integrations/useAsyncValidator/index.test.ts
index caa26189426..833ffba016e 100644
--- a/packages/integrations/useAsyncValidator/index.test.ts
+++ b/packages/integrations/useAsyncValidator/index.test.ts
@@ -1,6 +1,6 @@
import type { Rules } from 'async-validator'
import type { Ref } from 'vue-demi'
-import { ref } from 'vue-demi'
+import { nextTick, ref } from 'vue-demi'
import { useAsyncValidator } from '.'
describe('useAsyncValidator', () => {
@@ -88,7 +88,15 @@ describe('useAsyncValidator', () => {
const { pass, errors, isFinished } = await useAsyncValidator(form, rules)
expect(isFinished.value).toBe(true)
expect(pass.value).toBe(false)
- expect(errors.value).toMatchInlineSnapshot('[Error: Async Validation Error]')
+ expect(errors.value).toMatchInlineSnapshot(`
+ [
+ {
+ "field": "name",
+ "fieldValue": "jelf",
+ "message": "name length must be 5-20",
+ },
+ ]
+ `)
})
it('should reactive', async() => {
@@ -112,9 +120,16 @@ describe('useAsyncValidator', () => {
const { pass, errors, isFinished } = await useAsyncValidator(form, rules)
expect(isFinished.value).toBe(true)
expect(pass.value).toBe(false)
- expect(errors.value).toMatchInlineSnapshot('[Error: Async Validation Error]')
+ expect(errors.value).toMatchInlineSnapshot(`
+ [
+ {
+ "field": "name",
+ "fieldValue": "jelf",
+ "message": "name length must be 5-20",
+ },
+ ]
+ `)
form.value.name = 'okxiaoliang4'
- expect(isFinished.value).toBe(false)
})
})
From 106451f2d7a0493f95cabf727b871fdab99c2b82 Mon Sep 17 00:00:00 2001
From: okxiaoliang4 <353742991@qq.com>
Date: Fri, 15 Apr 2022 21:48:11 +0800
Subject: [PATCH 4/6] chore(useAsyncValidator): update
---
packages/integrations/useAsyncValidator/index.test.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/integrations/useAsyncValidator/index.test.ts b/packages/integrations/useAsyncValidator/index.test.ts
index 833ffba016e..87453b59cc6 100644
--- a/packages/integrations/useAsyncValidator/index.test.ts
+++ b/packages/integrations/useAsyncValidator/index.test.ts
@@ -1,6 +1,6 @@
import type { Rules } from 'async-validator'
import type { Ref } from 'vue-demi'
-import { nextTick, ref } from 'vue-demi'
+import { ref } from 'vue-demi'
import { useAsyncValidator } from '.'
describe('useAsyncValidator', () => {
From 8ca56b5a819189e7c6cdb007024395c24f204d6a Mon Sep 17 00:00:00 2001
From: Jelf <353742991@qq.com>
Date: Mon, 16 May 2022 14:46:55 +0800
Subject: [PATCH 5/6] chore: fix eslint
---
packages/integrations/useAsyncValidator/index.test.ts | 8 ++++----
packages/integrations/useAsyncValidator/index.ts | 2 +-
2 files changed, 5 insertions(+), 5 deletions(-)
diff --git a/packages/integrations/useAsyncValidator/index.test.ts b/packages/integrations/useAsyncValidator/index.test.ts
index 87453b59cc6..38a3cd9ce75 100644
--- a/packages/integrations/useAsyncValidator/index.test.ts
+++ b/packages/integrations/useAsyncValidator/index.test.ts
@@ -37,7 +37,7 @@ describe('useAsyncValidator', () => {
})
})
- it('should async', async() => {
+ it('should async', async () => {
const rules: Rules = {
name: {
type: 'string',
@@ -58,7 +58,7 @@ describe('useAsyncValidator', () => {
})
})
- it('should can be await', async() => {
+ it('should can be await', async () => {
const rules: Rules = {
name: {
type: 'string',
@@ -73,7 +73,7 @@ describe('useAsyncValidator', () => {
expect(errors.value).toMatchObject([])
})
- it('should fail to validate', async() => {
+ it('should fail to validate', async () => {
const rules: Rules = {
name: {
type: 'string',
@@ -99,7 +99,7 @@ describe('useAsyncValidator', () => {
`)
})
- it('should reactive', async() => {
+ it('should reactive', async () => {
const form = ref({
name: 'jelf',
age: 24,
diff --git a/packages/integrations/useAsyncValidator/index.ts b/packages/integrations/useAsyncValidator/index.ts
index 64cee3ef2ea..5f89111dd65 100644
--- a/packages/integrations/useAsyncValidator/index.ts
+++ b/packages/integrations/useAsyncValidator/index.ts
@@ -30,7 +30,7 @@ export function useAsyncValidator(value: MaybeRef>, rules: M
const errors = computed(() => errorInfo.value?.errors || [])
const errorFields = computed(() => errorInfo.value?.fields || {})
- watchEffect(async() => {
+ watchEffect(async () => {
isFinished.value = false
pass.value = false
const validator = new Schema(unref(rules))
From 9a6cd75948b4bd675194f1ed7bc9ab3803e9eae2 Mon Sep 17 00:00:00 2001
From: Anthony Fu
Date: Tue, 31 May 2022 20:44:31 +0800
Subject: [PATCH 6/6] chore: lint
---
packages/integrations/package.json | 8 ++++----
1 file changed, 4 insertions(+), 4 deletions(-)
diff --git a/packages/integrations/package.json b/packages/integrations/package.json
index d88638a382f..1c1b568f1c1 100644
--- a/packages/integrations/package.json
+++ b/packages/integrations/package.json
@@ -28,9 +28,9 @@
},
"./*": "./*",
"./useAsyncValidator": {
+ "types": "./useAsyncValidator.d.ts",
"import": "./useAsyncValidator.mjs",
- "require": "./useAsyncValidator.cjs",
- "types": "./useAsyncValidator.d.ts"
+ "require": "./useAsyncValidator.cjs"
},
"./useAxios": {
"types": "./useAxios.d.ts",
@@ -83,9 +83,9 @@
"require": "./useChangeCase.cjs"
},
"./useAsyncValidator/component": {
+ "types": "./useAsyncValidator/component.d.ts",
"import": "./useAsyncValidator/component.mjs",
- "require": "./useAsyncValidator/component.cjs",
- "types": "./useAsyncValidator/component.d.ts"
+ "require": "./useAsyncValidator/component.cjs"
}
},
"main": "./index.cjs",