From d0ba7adf335e71d0a3520873aeef50b75457c9e4 Mon Sep 17 00:00:00 2001 From: zxhlyh Date: Mon, 14 Jul 2025 17:02:46 +0800 Subject: [PATCH] form --- .../base/form/components/base/base-form.tsx | 32 +++++------------ web/app/components/base/form/hooks/index.ts | 1 + .../base/form/hooks/use-check-validated.ts | 31 ++++++++-------- .../base/form/hooks/use-get-validators.ts | 36 +++++++++++++++++++ web/app/components/base/form/types.ts | 4 ++- 5 files changed, 64 insertions(+), 40 deletions(-) create mode 100644 web/app/components/base/form/hooks/use-get-validators.ts diff --git a/web/app/components/base/form/components/base/base-form.tsx b/web/app/components/base/form/components/base/base-form.tsx index cde1c7619a..7502911a34 100644 --- a/web/app/components/base/form/components/base/base-form.tsx +++ b/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 ( {renderField} ) - }, [renderField, form, t]) + }, [renderField, form, getValidators]) if (!formSchemas?.length) return null diff --git a/web/app/components/base/form/hooks/index.ts b/web/app/components/base/form/hooks/index.ts index 189369f240..71ccfedef3 100644 --- a/web/app/components/base/form/hooks/index.ts +++ b/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' diff --git a/web/app/components/base/form/hooks/use-check-validated.ts b/web/app/components/base/form/hooks/use-check-validated.ts index 975c6fcb1f..aaf79f55d9 100644 --- a/web/app/components/base/form/hooks/use-check-validated.ts +++ b/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 { diff --git a/web/app/components/base/form/hooks/use-get-validators.ts b/web/app/components/base/form/hooks/use-get-validators.ts new file mode 100644 index 0000000000..91754bc1ba --- /dev/null +++ b/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, + } +} diff --git a/web/app/components/base/form/types.ts b/web/app/components/base/form/types.ts index 0a26b3fad3..c165d2939b 100644 --- a/web/app/components/base/form/types.ts +++ b/web/app/components/base/form/types.ts @@ -41,6 +41,8 @@ export type FormOption = { icon?: string } +export type AnyValidators = FieldValidators + export type FormSchema = { type: FormTypeEnum name: string @@ -55,7 +57,7 @@ export type FormSchema = { placeholder?: string | TypeWithI18N options?: FormOption[] labelClassName?: string - validators?: FieldValidators + validators?: AnyValidators } export type FormValues = Record