github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: form dynamic error

doc-form
tangjinzhou 2021-12-21 22:44:42 +08:00
parent a9b6de0940
commit 9172ea913e
2 changed files with 15 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/form/Form.tsx
View File

@ -93,7 +93,7 @@ export type FormExpose = {
resetFields: (name?: NamePath) => void; resetFields: (name?: NamePath) => void;
clearValidate: (name?: NamePath) => void; clearValidate: (name?: NamePath) => void;
validateFields: ( validateFields: (
nameList?: NamePath[], nameList?: NamePath[] | string,
options?: ValidateOptions, options?: ValidateOptions,
) => Promise<{ ) => Promise<{
[key: string]: any; [key: string]: any;
@ -102,7 +102,7 @@ export type FormExpose = {
[key: string]: any; [key: string]: any;
}; };
validate: ( validate: (
nameList?: NamePath[], nameList?: NamePath[] | string,
options?: ValidateOptions, options?: ValidateOptions,
) => Promise<{ ) => Promise<{
[key: string]: any; [key: string]: any;

18
components/form/FormItem.tsx
View File

@ -1,4 +1,4 @@
import type { PropType, ExtractPropTypes, ComputedRef } from 'vue'; import type { PropType, ExtractPropTypes, ComputedRef, Ref } from 'vue';
import { import {
watch, watch,
defineComponent, defineComponent,
@ -32,7 +32,7 @@ const ValidateStatuses = tuple('success', 'warning', 'error', 'validating', '');
export type ValidateStatus = typeof ValidateStatuses[number]; export type ValidateStatus = typeof ValidateStatuses[number];
export interface FieldExpose { export interface FieldExpose {
fieldValue: ComputedRef<any>; fieldValue: Ref<any>;
fieldId: ComputedRef<any>; fieldId: ComputedRef<any>;
fieldName: ComputedRef<any>; fieldName: ComputedRef<any>;
resetField: () => void; resetField: () => void;
@ -132,13 +132,21 @@ export default defineComponent({
return formName ? `${formName}_${mergedId}` : `${defaultItemNamePrefixCls}_${mergedId}`; return formName ? `${formName}_${mergedId}` : `${defaultItemNamePrefixCls}_${mergedId}`;
} }
}); });
const fieldValue = computed(() => { const getNewFieldValue = () => {
const model = formContext.model.value; const model = formContext.model.value;
if (!model || !fieldName.value) { if (!model || !fieldName.value) {
return; return;
} else {
return getPropByPath(model, namePath.value, true).v;
} }
return getPropByPath(model, namePath.value, true).v; };
}); const fieldValue = ref(getNewFieldValue());
watchEffect(
() => {
fieldValue.value = getNewFieldValue();
},
{ flush: 'post' },
);
const initialValue = ref(cloneDeep(fieldValue.value)); const initialValue = ref(cloneDeep(fieldValue.value));
const mergedValidateTrigger = computed(() => { const mergedValidateTrigger = computed(() => {