Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(batch-add-formitem):fix the form not working when setFieldsValue through form-groups and add a demo with form groups #3765

Merged
merged 2 commits into from
Apr 20, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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>
Loading