From 30878dc5efd04814c87f703122b53b6023b9ed9a Mon Sep 17 00:00:00 2001
From: Zhongxiang Wang <yhen@all-my-life.cn>
Date: Sun, 13 Mar 2022 23:00:28 +0800
Subject: [PATCH] fix(components): [form] set validateState to success after
 passed (#6596)

---
 .../components/form/__tests__/form.spec.tsx   | 30 +++++++++++++++++++
 packages/components/form/src/form-item.vue    |  4 ++-
 2 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/packages/components/form/__tests__/form.spec.tsx b/packages/components/form/__tests__/form.spec.tsx
index 67afc19631..6ee7864b11 100644
--- a/packages/components/form/__tests__/form.spec.tsx
+++ b/packages/components/form/__tests__/form.spec.tsx
@@ -490,4 +490,34 @@ describe('Form', () => {
     expect(res.valid).toBe(true)
     expect(res.fields).toBe(undefined)
   })
+
+  test('validate status', async () => {
+    const form = reactive({
+      age: '20',
+    })
+
+    const wrapper = mount({
+      setup() {
+        const rules = ref({
+          age: [
+            { required: true, message: 'Please input age', trigger: 'change' },
+          ],
+        })
+        return () => (
+          <Form ref="formRef" model={form} rules={rules}>
+            <FormItem ref="age" prop="age" label="age">
+              <Input v-model={form.age} />
+            </FormItem>
+          </Form>
+        )
+      },
+    })
+
+    await (wrapper.vm.$refs.formRef as FormInstance)
+      .validate()
+      .catch(() => undefined)
+    const ageField = wrapper.findComponent({ ref: 'age' })
+    expect((ageField.vm as FormItemInstance).validateState).toBe('success')
+    expect(ageField.classes()).toContain('is-success')
+  })
 })
diff --git a/packages/components/form/src/form-item.vue b/packages/components/form/src/form-item.vue
index deb173bd06..eaa5ac5e1d 100644
--- a/packages/components/form/src/form-item.vue
+++ b/packages/components/form/src/form-item.vue
@@ -248,7 +248,9 @@ const validate: FormItemContext['validate'] = async (trigger, callback) => {
 
   return validator
     .validate(model, { firstFields: true })
-    .then(() => undefined)
+    .then(() => {
+      validateState.value = 'success'
+    })
     .catch((err: ValidateFailure) => {
       const { errors, fields } = err
       if (!errors || !fields) console.error(err)