form

web/app/components/base/form/components/base/base-form.tsx

@@ -6,7 +6,6 @@ import {
 import type {
   AnyFieldApi,
 } from '@tanstack/react-form'
-import { useTranslation } from 'react-i18next'
 import { useForm } from '@tanstack/react-form'
 import type {
   FormRef,
@@ -19,7 +18,10 @@ import type {
   BaseFieldProps,
 } from '.'
 import cn from '@/utils/classnames'
-import { useGetFormValues } from '@/app/components/base/form/hooks'
+import {
+  useGetFormValues,
+  useGetValidators,
+} from '@/app/components/base/form/hooks'
 
 export type BaseFormProps = {
   formSchemas?: FormSchema[]
@@ -40,11 +42,11 @@ const BaseForm = ({
   ref,
   disabled,
 }: BaseFormProps) => {
-  const { t } = useTranslation()
   const form = useForm({
     defaultValues,
   })
   const { getFormValues } = useGetFormValues(form)
+  const { getValidators } = useGetValidators()
 
   useImperativeHandle(ref, () => {
     return {
@@ -78,39 +80,21 @@ const BaseForm = ({
   }, [formSchemas, fieldClassName, labelClassName, inputContainerClassName, inputClassName, disabled])
 
   const renderFieldWrapper = useCallback((formSchema: FormSchema) => {
+    const validators = getValidators(formSchema)
     const {
       name,
-      validators,
-      required,
     } = formSchema
-    let mergedValidators = validators
-    if (required && !validators) {
-      mergedValidators = {
-        onMount: ({ value }: any) => {
-          if (!value)
-            return t('common.errorMsg.fieldRequired', { field: name })
-        },
-        onChange: ({ value }: any) => {
-          if (!value)
-            return t('common.errorMsg.fieldRequired', { field: name })
-        },
-        onBlur: ({ value }: any) => {
-          if (!value)
-            return t('common.errorMsg.fieldRequired', { field: name })
-        },
-      }
-    }
 
     return (
       <form.Field
         key={name}
         name={name}
-        validators={mergedValidators}
+        validators={validators}
       >
         {renderField}
       </form.Field>
     )
-  }, [renderField, form, t])
+  }, [renderField, form, getValidators])
 
   if (!formSchemas?.length)
     return null

web/app/components/base/form/hooks/index.ts

@@ -1,2 +1,3 @@
 export * from './use-check-validated'
 export * from './use-get-form-values'
+export * from './use-get-validators'

web/app/components/base/form/hooks/use-check-validated.ts

@@ -7,27 +7,28 @@ export const useCheckValidated = (form: AnyFormApi) => {
 
   const checkValidated = useCallback(() => {
     const allError = form?.getAllErrors()
+    console.log('allError', allError)
 
-      if (allError) {
-        const fields = allError.fields
-        const errorArray = Object.keys(fields).reduce((acc: string[], key: string) => {
-          const errors: any[] = fields[key].errors
+    if (allError) {
+      const fields = allError.fields
+      const errorArray = Object.keys(fields).reduce((acc: string[], key: string) => {
+        const errors: any[] = fields[key].errors
 
-          return [...acc, ...errors]
-        }, [] as string[])
+        return [...acc, ...errors]
+      }, [] as string[])
 
-        if (errorArray.length) {
-          notify({
-            type: 'error',
-            message: errorArray[0],
-          })
-          return false
-        }
-
-        return true
+      if (errorArray.length) {
+        notify({
+          type: 'error',
+          message: errorArray[0],
+        })
+        return false
       }
 
       return true
+    }
+
+    return true
   }, [form, notify])
 
   return {

web/app/components/base/form/hooks/use-get-validators.ts

@@ -0,0 +1,36 @@
+import { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import type { FormSchema } from '../types'
+
+export const useGetValidators = () => {
+  const { t } = useTranslation()
+  const getValidators = useCallback((formSchema: FormSchema) => {
+    const {
+      name,
+      validators,
+      required,
+    } = formSchema
+    let mergedValidators = validators
+    if (required && !validators) {
+      mergedValidators = {
+        onMount: ({ value }: any) => {
+          if (!value)
+            return t('common.errorMsg.fieldRequired', { field: name })
+        },
+        onChange: ({ value }: any) => {
+          if (!value)
+            return t('common.errorMsg.fieldRequired', { field: name })
+        },
+        onBlur: ({ value }: any) => {
+          if (!value)
+            return t('common.errorMsg.fieldRequired', { field: name })
+        },
+      }
+    }
+    return mergedValidators
+  }, [t])
+
+  return {
+    getValidators,
+  }
+}

web/app/components/base/form/types.ts

@@ -41,6 +41,8 @@ export type FormOption = {
   icon?: string
 }
 
+export type AnyValidators = FieldValidators<any, any, any, any, any, any, any, any, any, any>
+
 export type FormSchema = {
   type: FormTypeEnum
   name: string
@@ -55,7 +57,7 @@ export type FormSchema = {
   placeholder?: string | TypeWithI18N
   options?: FormOption[]
   labelClassName?: string
-  validators?: FieldValidators<any, any, any, any, any, any, any, any, any, any>
+  validators?: AnyValidators
 }
 
 export type FormValues = Record<string, any>