diff --git a/components/form/Form.tsx b/components/form/Form.tsx index a78d18969..d07cf83ed 100755 --- a/components/form/Form.tsx +++ b/components/form/Form.tsx @@ -145,7 +145,12 @@ const Form = defineComponent({ } return true; }); - + const validateMessages = computed(() => { + return { + ...defaultValidateMessages, + ...props.validateMessages, + }; + }); const formClassName = computed(() => classNames(prefixCls.value, { [`${prefixCls.value}-${props.layout}`]: true, @@ -267,10 +272,7 @@ const Form = defineComponent({ // Add field validate rule in to promise list if (!provideNameList || containsNamePath(namePathList, fieldNamePath)) { const promise = field.validateRules({ - validateMessages: { - ...defaultValidateMessages, - ...props.validateMessages, - }, + validateMessages: validateMessages.value, ...options, }); @@ -376,6 +378,7 @@ const Form = defineComponent({ onValidate: (name, status, errors) => { emit('validate', name, status, errors); }, + validateMessages, }); watch( diff --git a/components/form/FormItem.tsx b/components/form/FormItem.tsx index bd2f9f981..f3b3443a3 100644 --- a/components/form/FormItem.tsx +++ b/components/form/FormItem.tsx @@ -186,9 +186,20 @@ export default defineComponent({ watchEffect(() => { validateState.value = props.validateStatus; }); - + const messageVariables = computed(() => { + let variables: Record = {}; + if (typeof props.label === 'string') { + variables.label = props.label; + } else if (props.name) { + variables.label = String(name); + } + if (props.messageVariables) { + variables = { ...variables, ...props.messageVariables }; + } + return variables; + }); const validateRules = (options: ValidateOptions) => { - const { validateFirst = false, messageVariables } = props; + const { validateFirst = false } = props; const { triggerName } = options || {}; let filteredRules = rulesRef.value; @@ -209,9 +220,12 @@ export default defineComponent({ namePath.value, fieldValue.value, filteredRules as RuleObject[], - options, + { + validateMessages: formContext.validateMessages.value, + ...options, + }, validateFirst, - messageVariables, + messageVariables.value, ); validateState.value = 'validating'; errors.value = []; diff --git a/components/form/context.ts b/components/form/context.ts index ce4d0e25c..8e78827b0 100644 --- a/components/form/context.ts +++ b/components/form/context.ts @@ -3,7 +3,8 @@ import { inject, provide, computed } from 'vue'; import type { ColProps } from '../grid'; import type { RequiredMark, ValidationRule } from './Form'; import type { ValidateStatus, FieldExpose } from './FormItem'; -import type { FormLabelAlign } from './interface'; +import type { FormLabelAlign, ValidateMessages } from './interface'; +import { defaultValidateMessages } from './utils/messages'; export interface FormContextProps { model?: ComputedRef; @@ -24,6 +25,7 @@ export interface FormContextProps { status: boolean, errors: string[] | null, ) => void; + validateMessages: ComputedRef; } export const FormContextKey: InjectionKey = Symbol('formContextKey'); @@ -44,6 +46,7 @@ export const useInjectForm = () => { rules: computed(() => undefined), requiredMark: computed(() => false), onValidate: () => {}, + validateMessages: computed(() => defaultValidateMessages), }); };