🧐[问题] ProForm + EditableProTable 保存时没有触发校验

[2018mjy]

提问前先看看：

https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md

🧐 问题描述

EditableProTable 保存时没有触发校验
复现链接

💻 示例代码

{
    title: '活动名称',
    dataIndex: 'title',
    width: '30%',
    formItemProps: {
      rules: [
        {
          required: true,
          message: '此项为必填项',
        },
      ],
    },
  },

🚑 其他信息

版本：

[github-actions]

以下的 Issues 可能会帮助到你 / The following issues may help you

• [🐛[BUG]EditableProTable 使用editableFormRef后，无法用formRef.current.setFieldsValue改变table的值 #6539][🐛[BUG]EditableProTable 使用editableFormRef后，无法用formRef.current.setFieldsValue改变table的值][62%]
• [🧐[问题]EditableProTable不更新数据  #6588][🧐[问题]EditableProTable不更新数据 ][61%]

[chenshuai2144]

TAutomatically replying with ChatGPT can be attempted, but it cannot be guaranteed to be completely accurate and may not fully address all issues. Please feel free to reply if you have any further questions or concerns.
此回复基于 ChatGPT 自动生成，可以尝试下方案，官方人员会在一定时间后继续继续处理。

你好，感谢您提交的问题。

根据您提供的信息，我们看到您使用了EditableProTable和ProForm，希望在保存时能够触发校验。根据我们在EditaleProTable文档中找到的信息，它提供了一个editable属性，用于定义是否允许编辑每个单元格。同时也提供了一个editableFn函数，用于校验表格值是否符合标准。那么在ProForm保存时应该如何触发校验呢？

经过测试，我们发现在ProForm中使用EditableProTable时，可以借助form.validateFields()函数来触发校验。具体实现代码如下：

const handleSave = async () => {
  const fieldsValue = await form.validateFields(); // 触发校验
  console.log('fieldsValue:', fieldsValue);
};

完整示例代码请参照下方：

import React, { useRef } from 'react';
import { EditableProTable, ProFormText } from '@ant-design/pro-form';

export default () => {
  const formRef = useRef();
  const editableRef = useRef();

  const handleSave = async () => {
    const fieldsValue = await formRef.current.validateFields();
    console.log('fieldsValue:', fieldsValue);
  };

  const columns = [
    {
      title: '姓名',
      dataIndex: 'name',
      width: '30%',
      editable: true, // 允许编辑
      formItemProps: {
        rules: [
          {
            required: true,
            message: '此项为必填项',
          },
        ],
      },
    },
    {
      title: '年龄',
      dataIndex: 'age',
      width: '30%',
      editable: true, // 允许编辑
      formItemProps: {
        rules: [
          {
            required: true,
            message: '此项为必填项',
          },
          {
            type: 'number',
            min: 0,
            max: 120,
            message: '请输入正确的年龄',
          },
        ],
      },
    },
    {
      title: '操作',
      valueType: 'option',
      width: 100,
      render: () => <a>删除</a>,
    },
  ];

  // 可以通过editableFn函数来校验表单值是否符合要求
  const editableFn = async (record, validateFields) => {
    try {
      await validateFields();
      return true;
    } catch (error) {
      return false;
    }
  };

  return (
    <div>
      <ProForm onFinish={handleSave} formRef={formRef}>
        <EditableProTable
          rowKey="id"
          bordered
          columns={columns}
          request={async () => ({
            data: [
              {
                id: 1,
                name: '张三',
                age: 18,
              },
              {
                id: 2,
                name: '李四',
                age: 19,
              },
            ],
            success: true,
          })}
          value={{ dataSource: [], current: 0, pageSize: 10 }}
          recordCreatorProps={{ position: 'bottom' }}
          editable={{
            type: 'single',
            editableKeys: editableRef.current || [],
            onSave: async () => {
              editableRef.current = [];
            },
            onChange: set => {
              editableRef.current = set;
            },
            editableRowKeys: () => editableRef.current,
            // 可以设置editableFn函数来校验表单值是否符合要求
            editableFn,
          }}
        />
      </ProForm>
    </div>
  );
};

希望这些信息可以帮助到你，如有问题可以直接在此提出，我们会尽快回复。

[cangsnage]

自定义按钮新增，只能新增一行，怎么新增完了继续新增呢 ，不在actionRender里面写自定义按钮

[cxr470235739]

TAutomatically replying with ChatGPT can be attempted, but it cannot be guaranteed to be completely accurate and may not fully address all issues. Please feel free to reply if you have any further questions or concerns.
此回复基于 ChatGPT 自动生成，可以尝试下方案，官方人员会在一定时间后继续继续处理。

你好，感谢您提交的问题。

根据您提供的信息，我们看到您使用了EditableProTable和ProForm，希望在保存时能够触发校验。根据我们在EditaleProTable文档中找到的信息，它提供了一个editable属性，用于定义是否允许编辑每个单元格。同时也提供了一个editableFn函数，用于校验表格值是否符合标准。那么在ProForm保存时应该如何触发校验呢？

经过测试，我们发现在ProForm中使用EditableProTable时，可以借助form.validateFields()函数来触发校验。具体实现代码如下：

const handleSave = async () => {
  const fieldsValue = await form.validateFields(); // 触发校验
  console.log('fieldsValue:', fieldsValue);
};

完整示例代码请参照下方：

import React, { useRef } from 'react';
import { EditableProTable, ProFormText } from '@ant-design/pro-form';

export default () => {
  const formRef = useRef();
  const editableRef = useRef();

  const handleSave = async () => {
    const fieldsValue = await formRef.current.validateFields();
    console.log('fieldsValue:', fieldsValue);
  };

  const columns = [
    {
      title: '姓名',
      dataIndex: 'name',
      width: '30%',
      editable: true, // 允许编辑
      formItemProps: {
        rules: [
          {
            required: true,
            message: '此项为必填项',
          },
        ],
      },
    },
    {
      title: '年龄',
      dataIndex: 'age',
      width: '30%',
      editable: true, // 允许编辑
      formItemProps: {
        rules: [
          {
            required: true,
            message: '此项为必填项',
          },
          {
            type: 'number',
            min: 0,
            max: 120,
            message: '请输入正确的年龄',
          },
        ],
      },
    },
    {
      title: '操作',
      valueType: 'option',
      width: 100,
      render: () => <a>删除</a>,
    },
  ];

  // 可以通过editableFn函数来校验表单值是否符合要求
  const editableFn = async (record, validateFields) => {
    try {
      await validateFields();
      return true;
    } catch (error) {
      return false;
    }
  };

  return (
    <div>
      <ProForm onFinish={handleSave} formRef={formRef}>
        <EditableProTable
          rowKey="id"
          bordered
          columns={columns}
          request={async () => ({
            data: [
              {
                id: 1,
                name: '张三',
                age: 18,
              },
              {
                id: 2,
                name: '李四',
                age: 19,
              },
            ],
            success: true,
          })}
          value={{ dataSource: [], current: 0, pageSize: 10 }}
          recordCreatorProps={{ position: 'bottom' }}
          editable={{
            type: 'single',
            editableKeys: editableRef.current || [],
            onSave: async () => {
              editableRef.current = [];
            },
            onChange: set => {
              editableRef.current = set;
            },
            editableRowKeys: () => editableRef.current,
            // 可以设置editableFn函数来校验表单值是否符合要求
            editableFn,
          }}
        />
      </ProForm>
    </div>
  );
};

希望这些信息可以帮助到你，如有问题可以直接在此提出，我们会尽快回复。

ts里怎么没看到editableFn这个api

[wanglianjie91]

不理解为什么editableKeys要受控。