diff --git a/components/form/Form.tsx b/components/form/Form.tsx index 250a7b190f..d07cf83ed2 100755 --- a/components/form/Form.tsx +++ b/components/form/Form.tsx @@ -93,7 +93,7 @@ export type FormExpose = { resetFields: (name?: NamePath) => void; clearValidate: (name?: NamePath) => void; validateFields: ( - nameList?: NamePath[], + nameList?: NamePath[] | string, options?: ValidateOptions, ) => Promise<{ [key: string]: any; @@ -102,7 +102,7 @@ export type FormExpose = { [key: string]: any; }; validate: ( - nameList?: NamePath[], + nameList?: NamePath[] | string, options?: ValidateOptions, ) => Promise<{ [key: string]: any; @@ -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 3989f15bd4..f3b3443a3c 100644 --- a/components/form/FormItem.tsx +++ b/components/form/FormItem.tsx @@ -1,4 +1,4 @@ -import type { PropType, ExtractPropTypes, ComputedRef } from 'vue'; +import type { PropType, ExtractPropTypes, ComputedRef, Ref } from 'vue'; import { watch, defineComponent, @@ -32,7 +32,7 @@ const ValidateStatuses = tuple('success', 'warning', 'error', 'validating', ''); export type ValidateStatus = typeof ValidateStatuses[number]; export interface FieldExpose { - fieldValue: ComputedRef; + fieldValue: Ref; fieldId: ComputedRef; fieldName: ComputedRef; resetField: () => void; @@ -132,13 +132,15 @@ export default defineComponent({ return formName ? `${formName}_${mergedId}` : `${defaultItemNamePrefixCls}_${mergedId}`; } }); - const fieldValue = computed(() => { + const getNewFieldValue = () => { const model = formContext.model.value; if (!model || !fieldName.value) { return; + } else { + return getPropByPath(model, namePath.value, true).v; } - return getPropByPath(model, namePath.value, true).v; - }); + }; + const fieldValue = computed(() => getNewFieldValue()); const initialValue = ref(cloneDeep(fieldValue.value)); const mergedValidateTrigger = computed(() => { @@ -184,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; @@ -207,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 = []; @@ -285,12 +301,6 @@ export default defineComponent({ resetField, }); - // instead useProvideFormItemContext onFieldChange - watch(fieldValue, () => { - if (props.autoLink) { - onFieldChange(); - } - }); useProvideFormItemContext( { id: fieldId, @@ -300,9 +310,9 @@ export default defineComponent({ } }, onFieldChange: () => { - // if (props.autoLink) { - // onFieldChange(); - // } + if (props.autoLink) { + onFieldChange(); + } }, clearValidate, }, diff --git a/components/form/__tests__/__snapshots__/demo.test.js.snap b/components/form/__tests__/__snapshots__/demo.test.js.snap index 6c76804300..12dfa3b09d 100644 --- a/components/form/__tests__/__snapshots__/demo.test.js.snap +++ b/components/form/__tests__/__snapshots__/demo.test.js.snap @@ -1,86 +1,181 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`renders ./components/form/demo/basic.vue correctly 1`] = ` -
-
-
-
-
-
- +exports[`renders ./components/form/demo/advanced-search.vue correctly 1`] = ` +
+ +
+
+
+
+
+
+
+ +
+ + +
+
- - -
-
-
-
-
-
-
-
+
+
+
+
+
+
+ +
-
- please select your zone -
+
+
+
+
+
+
+
+
+
+ +
+
-
- - -
-
-
-
-
-
-
- -
-
+
+
+
+
+
+
+ +
+ + +
+
+
+
+
+
+
+
+
+ +
-
- - -
-
-
-
-
-
-
- +
+
+
+
+
+
+ +
+ + +
+
+
+ + + + - -
-
+
+
Collapse
+
+ +
Search Result List
+
+`; + +exports[`renders ./components/form/demo/basic.vue correctly 1`] = ` +
-