fix(Form): 表单验证部分

Author: ChenlingasMx

example/examples/src/routes/Form/index.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
-import {Form, Button} from '@uiw/react-native';
+import {Form, Button, Toast} from '@uiw/react-native';
 import Layout, {Container} from '../../Layout';
 const {Body, Footer} = Layout;
 
 const FormDemo = () => {
+  const form = Form.useForm();
   const items = [
     {
       type: 'input',
@@ -13,12 +14,10 @@ const FormDemo = () => {
     {
       type: 'input',
       field: 'age',
+      validate: (val: any) => (Number(val) > 30 || Number(val) < 10 ? `起输入10-30` : ''),
     },
   ];
-
-  const initialValues = {name: '王滴滴', age: ''};
-
-  const form = Form.useForm();
+  const initialValues = {name: '王滴滴', age: '31'};
 
   return (
     <Container>
@@ -28,18 +27,27 @@ const FormDemo = () => {
           <Button
             type="primary"
             onPress={() => {
-              const values = form.getStore();
-              const age = form.getFieldValue('age');
-              console.log('values', values);
+              form
+                .validateFields()
+                .then((values: any) => Toast.success(JSON.stringify(values)))
+                .catch((errors: any) => Toast.warning(JSON.stringify(errors)));
             }}>
-            默认按钮
+            确定
           </Button>
           <Button type="primary" onPress={() => form.setFieldValue('age', '456')}>
             设置
           </Button>
           <Button type="primary" onPress={() => form.resetFieldValue()}>
             重置
           </Button>
+          <Button
+            type="primary"
+            onPress={() => {
+              const errors = form.validate();
+              Toast.warning(JSON.stringify(errors));
+            }}>
+            触发验证
+          </Button>
         </Body>
         <Footer />
       </Layout>

packages/core/src/Form/form.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useRef } from 'react';
 import FormItems from './formItems';
 import { Provider } from './hooks/context';
 import { FormProps, KeyType } from './types';
+import { cloneDeep } from './utils';
 
 const Form = <
   FormData extends unknown = any,
@@ -17,7 +18,7 @@ const Form = <
   const innerMethods = form.getInnerMethods(true);
 
   useEffect(() => {
-    if (!isMount.current) innerMethods.updateStore({ initialValues: initialValues, store: initialValues });
+    if (!isMount.current) innerMethods.updateStore({ initialValues: cloneDeep(initialValues), store: initialValues });
   }, []);
 
   useEffect(() => {

packages/core/src/Form/hooks/useForm.ts

@@ -1,6 +1,8 @@
 import { KeyType, InnerMethodsReturnType } from '../types';
 import { useState } from 'react';
 import { useValidator } from '@validator.tool/hook';
+import { isObjectEmpty } from '../utils/is';
+import { cloneDeep } from '../utils';
 
 type State<FormData = any> = {
   store: Partial<FormData>;
@@ -51,19 +53,43 @@ export default function useForm<
     });
   };
 
+  // 触发验证
+  const validate = () => {
+    const { showMessages, errorMessages } = validator;
+    showMessages?.();
+    forceUpdate?.();
+    if (Object.keys(errorMessages).length > 0) {
+      return errorMessages;
+    }
+    return {};
+  };
+
+  // 验证并获取表单值
+  const validateFields = () => {
+    return new Promise(async function (resolve, reject) {
+      const errors = validate();
+      if (isObjectEmpty(errors)) {
+        const value = cloneDeep(state.store);
+        resolve(value);
+      } else {
+        reject(errors);
+      }
+    });
+  };
+
   const getStore = (): Partial<FormData> => {
     const { store } = state;
     return store;
   };
 
   const getFormInstance = () => {
     return {
-      forceUpdate,
-      validator,
-      getStore: getStore,
-      getFieldValue: getFieldValue,
-      setFieldValue: setFieldValue,
+      getStore,
+      getFieldValue,
+      setFieldValue,
       resetFieldValue,
+      validate,
+      validateFields,
       getInnerMethods: (inner?: boolean): InnerMethodsReturnType<FormData, FieldValue, FieldKey> => {
         let methods = {} as any;
         if (inner) {

packages/core/src/Form/types/index.tsx

@@ -20,6 +20,8 @@ type FormInstance<FormData = any, FieldValue = FormData[keyof FormData], FieldKe
   getFieldValue: (field: FieldKey) => FieldValue;
   setFieldValue: (field: FieldKey, value: FieldValue) => void;
   resetFieldValue: () => void;
+  validate: () => Partial<Record<string, string>>;
+  validateFields: () => Promise<FormData> | any;
   getInnerMethods: (inner?: boolean) => InnerMethodsReturnType<FormData, FieldValue, FieldKey>;
 };
 

packages/core/src/Form/utils/index.tsx

@@ -11,8 +11,3 @@ export function cloneDeep(value: any) {
     }
   });
 }
-
-export function set<T extends { [key: string]: any }>(target: T, field: PropertyPath, value: any) {
-  lodashSet(target, field, cloneDeep(value));
-  return target;
-}

packages/core/src/Form/utils/is.ts

@@ -19,3 +19,10 @@ export function isNumber(obj: any): obj is number {
 export function isRegExp(obj: any) {
   return opt.call(obj) === '[object RegExp]';
 }
+
+export function isObjectEmpty(obj: any) {
+  for (let _key in obj) {
+    return false;
+  }
+  return true;
+}