fix: validate

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

@@ -70,25 +70,33 @@ const BaseForm = ({
     return null
   }, [formSchemas, fieldClassName, labelClassName, inputContainerClassName, inputClassName, disabled])
 
+  const renderFieldWrapper = useCallback((formSchema: FormSchema) => {
+    const {
+      name,
+    } = formSchema
+
+    return (
+      <form.Field
+        key={name}
+        name={name}
+      >
+        {renderField}
+      </form.Field>
+    )
+  }, [renderField, form])
+
   if (!formSchemas?.length)
     return null
 
   return (
     <form
       className={cn(formClassName)}
+      onSubmit={(e) => {
+        e.preventDefault()
+        form?.handleSubmit()
+      }}
     >
-      {
-        formSchemas.map((formSchema) => {
-          return (
-            <form.Field
-              key={formSchema.name}
-              name={formSchema.name}
-            >
-              {renderField}
-            </form.Field>
-          )
-        })
-      }
+      {formSchemas.map(renderFieldWrapper)}
     </form>
   )
 }

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

@@ -2,7 +2,10 @@ import type {
   ForwardedRef,
   ReactNode,
 } from 'react'
-import type { AnyFormApi } from '@tanstack/react-form'
+import type {
+  AnyFormApi,
+  FieldValidators,
+} from '@tanstack/react-form'
 
 export type TypeWithI18N<T = string> = {
   en_US: T
@@ -52,6 +55,7 @@ export type FormSchema = {
   placeholder?: string | TypeWithI18N
   options?: FormOption[]
   labelClassName?: string
+  validators?: FieldValidators<any, any, any, any, any, any, any, any, any, any>
 }
 
 export type FormValues = Record<string, any>