Skip to content

Commit

Permalink
fix(batch-add-formitem):fix the form not working when setFieldsValue …
Browse files Browse the repository at this point in the history
…through form-groups and add a demo with form groups (#3765)

* fix(util): 修复form表单批量添加的时候用setFieldsValue和model设置不生效的问题

* feat(demo): 为表单组增删添加表单组增删的demo与给出表单组赋值修复后setFieldsValue的示例
  • Loading branch information
electroluxcode authored Apr 20, 2024
1 parent 4a12774 commit 82bf009
Show file tree
Hide file tree
Showing 2 changed files with 76 additions and 3 deletions.
2 changes: 1 addition & 1 deletion src/components/Form/src/hooks/useFormEvents.ts
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,7 @@ export function useFormEvents({
} else {
nestKeyArray.forEach((nestKey: string) => {
try {
const value = nestKey.split('.').reduce((out, item) => out[item], values);
const value = get(values,nestKey)
if (isDef(value)) {
unref(formModel)[nestKey] = unref(value);
validKeys.push(nestKey);
Expand Down
77 changes: 75 additions & 2 deletions src/views/demo/form/AppendForm.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<PageWrapper title="表单增删示例">
<CollapseContainer title="表单增删">
<CollapseContainer title="表单项增删">
<BasicForm @register="register" @submit="handleSubmit">
<template #add="{ field }">
<a-button v-if="Number(field) === 0" @click="add">+</a-button>
Expand All @@ -11,14 +11,26 @@
</template>
</BasicForm>
</CollapseContainer>
<CollapseContainer title="表单组增删" class="my-3">
<a-button @click="setGroup">设置初始值</a-button>
<a-button class="m-2" @click="addGroup">
批量添加表单
</a-button>
<a-button @click="delGroup">批量减少表单</a-button>
<BasicForm @register="registerGroup" @submit="handleSubmitGroup">
</BasicForm>
</CollapseContainer>
</PageWrapper>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { BasicForm, useForm } from '@/components/Form';
import { CollapseContainer } from '@/components/Container';
import { PageWrapper } from '@/components/Page';
import { useMessage } from '@/hooks/web/useMessage';
const { createMessage } = useMessage();
const count = ref(0);
const [register, { appendSchemaByField, removeSchemaByField, validate }] = useForm({
schemas: [
{
Expand Down Expand Up @@ -48,6 +60,7 @@
async function handleSubmit() {
try {
const data = await validate();
createMessage.success("请前往控制台查看输出")
console.log(data);
} catch (e) {
console.log(e);
Expand Down Expand Up @@ -121,4 +134,64 @@
removeSchemaByField([`field${field}a`, `field${field}b`, `${field}`]);
n.value--;
}
const [
registerGroup,
{ appendSchemaByField: appendSchemaByFieldGroup, removeSchemaByField:removeSchemaByFieldGroup, getFieldsValue:getFieldsValueGroup,setFieldsValue },
] = useForm({
schemas: [
{
field: `field[${count.value}].a`,
component: 'Input',
label: '字段a',
colProps:{span:9},
},
{
field: `field[${count.value}].b`,
colProps:{span:9},
component: 'Input',
label: '字段b',
},
],
labelWidth: 100,
actionColOptions: { span: 24 },
baseColProps: { span: 8 },
});
function addGroup() {
count.value++;
appendSchemaByFieldGroup([ {
field: `field[${count.value}].a`,
component: 'Input',
colProps:{span:9},
label: '字段a',
},
{
field: `field[${count.value}].b`,
component: 'Input',
colProps:{span:9},
label: '字段b',
},
],"")
}
function delGroup() {
removeSchemaByFieldGroup([`field[${count.value}].a`, `field[${count.value}].b`]);
count.value--;
}
function setGroup(){
setFieldsValue({
field:[{
a:"默认a",
b:"默认b"
}]
})
}
function handleSubmitGroup(){
createMessage.success("请前往控制台查看输出")
console.log(getFieldsValueGroup())
}
</script>

0 comments on commit 82bf009

Please sign in to comment.