fix: the form not working when setFieldsValue through form-groups and add a...

Electrolux

2024-04-20 65e5e71f5ee44eac221721de2c8c1d03e622e34a

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

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

* feat(demo): 为表单组增删添加表单组增删的demo与给出表单组赋值修复后setFieldsValue的示例

 src/components/Form/src/hooks/useFormEvents.ts

@@ -163,7 +163,7 @@
      } 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);

 src/views/demo/form/AppendForm.vue

@@ -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>
@@ -11,6 +11,15 @@
        </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>
@@ -18,7 +27,10 @@
  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: [
      {
@@ -48,6 +60,7 @@
  async function handleSubmit() {
    try {
      const data = await validate();
      createMessage.success("请前往控制台查看输出")
      console.log(data);
    } catch (e) {
      console.log(e);
@@ -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>