فهرست منبع

fix: type define not support return promise of formProps.validateFields (#2769)

pointhalo 6 ماه پیش
والد
کامیت
d65e331ddd
2فایلهای تغییر یافته به همراه20 افزوده شده و 2 حذف شده
  1. 17 1
      packages/semi-ui/form/_story/form.stories.tsx
  2. 3 1
      packages/semi-ui/form/interface.ts

+ 17 - 1
packages/semi-ui/form/_story/form.stories.tsx

@@ -167,6 +167,7 @@ class Demo extends React.Component<IProps, IState> {
     constructor(props:any) {
       super(props);
       this.state = { visible: false};
+      this.asyncValidateFields = this.asyncValidateFields.bind(this);
     }
 
     getFormApi(formApi) {
@@ -196,6 +197,20 @@ class Demo extends React.Component<IProps, IState> {
         let c = formApi.getValue('test4.notExist');
     }
 
+    asyncValidateFields(values) {
+        const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
+        return sleep(2000).then(() => {
+            let errors = {} as Record<string, any>;
+            if (values.name !== 'mike') {
+                errors.name = 'you must name mike';
+            }
+            if (values.sex !== 'female') {
+                errors.sex = 'sex not valid';
+            }
+            return errors;
+        });
+    }
+
     render() {
       const { visible } = this.state;
       return (
@@ -204,7 +219,8 @@ class Demo extends React.Component<IProps, IState> {
             getFormApi={this.getFormApi}
             onSubmit={values => console.log(values.test2)}
             onChange={formState => formState.values.test}
-            validateFields={values => ({ test4: 'test4 empty', test2: '' }) }
+            validateFields={this.asyncValidateFields}
+            // validateFields={values => ({ test4: 'test4 empty', test2: '', fieldNotExist: 'xx' }) }
         >
           </Form>
         </>

+ 3 - 1
packages/semi-ui/form/interface.ts

@@ -97,6 +97,8 @@ export interface FormFCChild<K extends Record<string, any> = any> {
 }
 
 
+type BatchValidateResult<Values> = string | Partial<AllErrors<Values>>
+
 export interface BaseFormProps <Values extends Record<string, any> = any> extends Omit<React.FormHTMLAttributes<HTMLFormElement>, 'children' | 'onChange' | 'onSubmit' | 'onReset'> {
     'aria-label'?: React.AriaAttributes['aria-label'];
     onSubmit?: (values: Values, e?: React.FormEvent<HTMLFormElement>) => void;
@@ -106,7 +108,7 @@ export interface BaseFormProps <Values extends Record<string, any> = any> extend
     onErrorChange?: (errors: Record<keyof Values, FieldError>, changedError?: Partial<Record<keyof Values, FieldError>>) => void;
     onChange?: (formState: FormState<Values>) => void;
     allowEmpty?: boolean;
-    validateFields?: (values: Values) => string | Partial<AllErrors<Values>>;
+    validateFields?: (values: Values) => BatchValidateResult<Values> | Promise<BatchValidateResult<Values>>;
     /** Use this if you want to populate the form with initial values. */
     initValues?: Values;
     id?: string;