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

electroluxcode · 2024-04-18T11:28:51Z

`General`

✏️ Mark the necessary items without changing the structure of the PR template.

[ x] Pull request template structure not broken
1.修复不能通过form组件的 setFieldsValue和modal 进行表单组赋值的问题
2.添加增删表单组的示例，可以一组组添加并且增删与赋值（之前表单增删示例的demo重命名成表单项了，因为从源码看这里本质是一项项添加的）

wangjue666 · 2024-04-19T04:12:30Z

1.修复不能通过form组件的 setFieldsValue和modal 进行表单组赋值的问题

这个有相关issue吗？

electroluxcode · 2024-04-19T04:15:43Z

1.修复不能通过form组件的 setFieldsValue和modal 进行表单组赋值的问题

这个有相关issue吗？

issue区中没有看到相关的issue，这是我在实际开发中发现的问题。可以通过pr demo中的 setFieldsValue 来进行测试，在这个pr之前，对这个demo代码使用 setFieldsValue对于表单组是不生效的

wangjue666 · 2024-04-19T09:32:06Z

issue区中没有看到相关的issue，这是我在实际开发中发现的问题。可以通过pr demo中的 setFieldsValue 来进行测试，在这个pr之前，对这个demo代码使用 setFieldsValue对于表单组是不生效的

好的，我晚点测试测试

electroluxcode · 2024-04-19T10:27:23Z

issue区中没有看到相关的issue，这是我在实际开发中发现的问题。可以通过pr demo中的 setFieldsValue 来进行测试，在这个pr之前，对这个demo代码使用 setFieldsValue对于表单组是不生效的

好的，我晚点测试测试

好嘞，麻烦你拉，我clone了一个main分支下的vben admin ，可以直观看到修改前bug的复现(url: #/comp/form/appendForm)

https://codesandbox.io/p/github/electroluxcode/vue-vben-admin/main?file=%2Fsrc%2Fviews%2Fdemo%2Fform%2FAppendForm.vue%3A5%2C36&import=true&workspaceId=137471a6-f9d2-4b79-bfb2-49bc9d3932ec

在点击上方链接的 设置初始值 的时候，可以复现bug

wangjue666 · 2024-04-20T08:23:05Z

@electroluxcode 你提供的codesandbox链接我无法打开

const [register, { appendSchemaByField, removeSchemaByField, validate, setFieldsValue }] =
    useForm({
      schemas: [
        {
          field: 'field0a',
          component: 'Input',
          label: '字段0',
          required: true,
        },
        {
          field: 'field0b',
          component: 'Input',
          label: '字段0',
          required: true,
        },
        {
          field: '0',
          // component: 'Input',
          label: ' ',
          slot: 'add',
        },
      ],
      labelWidth: 100,
      actionColOptions: { span: 24 },
      baseColProps: { span: 8 },
    });

  async function handleSubmit() {
    setFieldsValue({ field0a: '1', field0b: '2' });
    try {
      const data = await validate();
      console.log(data);
    } catch (e) {
      console.log(e);
    }
  }

Screenity.video.-.Apr.20.2024.mp4

我测试下没有复现你的问题，是哪个步骤出差错了吗？

electroluxcode · 2024-04-20T08:32:54Z

@electroluxcode 你提供的codesandbox链接我无法打开

const [register, { appendSchemaByField, removeSchemaByField, validate, setFieldsValue }] =
    useForm({
      schemas: [
        {
          field: 'field0a',
          component: 'Input',
          label: '字段0',
          required: true,
        },
        {
          field: 'field0b',
          component: 'Input',
          label: '字段0',
          required: true,
        },
        {
          field: '0',
          // component: 'Input',
          label: ' ',
          slot: 'add',
        },
      ],
      labelWidth: 100,
      actionColOptions: { span: 24 },
      baseColProps: { span: 8 },
    });

  async function handleSubmit() {
    setFieldsValue({ field0a: '1', field0b: '2' });
    try {
      const data = await validate();
      console.log(data);
    } catch (e) {
      console.log(e);
    }
  }

Screenity.video.-.Apr.20.2024.mp4
我测试下没有复现你的问题，是哪个步骤出差错了吗？

你的这个demo其是复现的是表单项的增删，这个地方没有问题。而批量增删表单组，例如设置一个数组的默认值是有问题的。示例如下

<template>
  <PageWrapper title="表单增删示例">
    <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 [
  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>

wangjue666 · 2024-04-20T08:55:58Z

@electroluxcode LGTM! 下次可以先开个issue, pr链接到issue上

… add a demo with form groups (#3765) * fix(util): 修复form表单批量添加的时候用setFieldsValue和model设置不生效的问题 * feat(demo): 为表单组增删添加表单组增删的demo与给出表单组赋值修复后setFieldsValue的示例

electroluxcode added 2 commits April 18, 2024 19:12

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

cb7cc8e

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

50c25af

electroluxcode changed the title ~~Fix/batch add form item~~ fix(batch-add-formitem):fix the form not working when setFieldsValue through form-groups and add a demo with form groups Apr 18, 2024

electroluxcode marked this pull request as draft April 19, 2024 03:28

electroluxcode marked this pull request as ready for review April 19, 2024 03:31

wangjue666 self-requested a review April 19, 2024 09:31

wangjue666 approved these changes Apr 20, 2024

View reviewed changes

wangjue666 merged commit 82bf009 into vbenjs:main Apr 20, 2024
2 checks passed

vbenjs locked and limited conversation to collaborators Aug 3, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

electroluxcode commented Apr 18, 2024 •

edited

Loading

wangjue666 commented Apr 19, 2024

electroluxcode commented Apr 19, 2024 •

edited

Loading

wangjue666 commented Apr 19, 2024

electroluxcode commented Apr 19, 2024 •

edited

Loading

wangjue666 commented Apr 20, 2024

electroluxcode commented Apr 20, 2024 •

edited

Loading

wangjue666 commented Apr 20, 2024

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

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

Conversation

electroluxcode commented Apr 18, 2024 • edited Loading

General

wangjue666 commented Apr 19, 2024

electroluxcode commented Apr 19, 2024 • edited Loading

wangjue666 commented Apr 19, 2024

electroluxcode commented Apr 19, 2024 • edited Loading

wangjue666 commented Apr 20, 2024

electroluxcode commented Apr 20, 2024 • edited Loading

wangjue666 commented Apr 20, 2024

electroluxcode commented Apr 18, 2024 •

edited

Loading

`General`

electroluxcode commented Apr 19, 2024 •

edited

Loading

electroluxcode commented Apr 19, 2024 •

edited

Loading

electroluxcode commented Apr 20, 2024 •

edited

Loading