feat(components): [form] export fields (#16755)

* feat(components): [form] export fields

* docs: format

* feat: add test

* Update packages/components/form/src/form.vue

Co-authored-by: btea <2356281422@qq.com>

* Update docs/en-US/component/form.md

Co-authored-by: btea <2356281422@qq.com>

* Update form.md

---------

Co-authored-by: btea <2356281422@qq.com>

docs/en-US/component/form.md

@@ -165,6 +165,7 @@ form/accessibility
 | resetFields   | Reset specified fields and remove validation result.               | ^[Function]`(props?: Arrayable<FormItemProp> \| undefined) => void`                                                               |
 | scrollToField | Scroll to the specified fields.                                    | ^[Function]`(prop: FormItemProp) => void`                                                                                         |
 | clearValidate | Clear validation message for specified fields.                     | ^[Function]`(props?: Arrayable<FormItemProp> \| undefined) => void`                                                               |
+| fields ^(2.7.3)        | Get all fields context.                                    | ^[array]`FormItemContext[]`                                                                  |
 
 ## FormItem API
 
@@ -268,6 +269,29 @@ type FormRules<T extends MaybeRef<Record<string, any> | string> = string> =
       Arrayable<FormItemRule>
     >
   >
+
+type FormItemValidateState = typeof formItemValidateStates[number]
+type FormItemProps = ExtractPropTypes<typeof formItemProps>
+
+type FormItemContext = FormItemProps & {
+  $el: HTMLDivElement | undefined
+  size: ComponentSize
+  validateState: FormItemValidateState
+  isGroup: boolean
+  labelId: string
+  inputIds: string[]
+  hasLabel: boolean
+  fieldValue: any
+  addInputId: (id: string) => void
+  removeInputId: (id: string) => void
+  validate: (
+    trigger: string,
+    callback?: FormValidateCallback
+  ) => FormValidationResult
+  resetField(): void
+  clearValidate(): void
+}
+
 ```
 
 </details>

packages/components/form/__tests__/form.test.tsx

@@ -470,6 +470,44 @@ describe('Form', () => {
     window.HTMLElement.prototype.scrollIntoView = oldScrollIntoView
   })
 
+  it('get form all fields', 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.value}>
+            <FormItem ref="age" prop="age" label="age" required>
+              <Input v-model={form.age} />
+            </FormItem>
+          </Form>
+        )
+      },
+    })
+
+    const formRef = wrapper.findComponent({ ref: 'formRef' }).vm as FormInstance
+    expect(formRef).toHaveProperty('fields')
+    expect(formRef.fields).toBeInstanceOf(Array)
+    const field = formRef.fields[0]
+    expect(field).toHaveProperty('fieldValue')
+    expect(field.fieldValue).toBe('20')
+    expect(field).toHaveProperty('required')
+    expect(field.required).toBe(true)
+    expect(field).toHaveProperty('validateState')
+    expect(field.validateState).toBe('')
+    await formRef.validate()
+    const field2 = formRef.fields[0]
+    expect(field2).toHaveProperty('validateState')
+    expect(field2.validateState).toBe('success')
+  })
+
   it('validate return parameters', async () => {
     const form = reactive({
       name: 'test',

packages/components/form/src/form.vue

@@ -201,5 +201,9 @@ defineExpose({
    * @description Scroll to the specified fields.
    */
   scrollToField,
+  /**
+   * @description All fields context.
+   */
+  fields,
 })
 </script>