Ant design 4 验证数组中的表单项

Question

我是 ant 设计的新手，我使用数组渲染了一个表单项。我想编写一个自定义验证来检查分配字段总和是否超过 100 且不大于或小于 100。如何使用 getFieldValue 获取相关分配字段？

 <Form.Item
              label="Allocation "
              name={["userBeneficiary", `${index}`, "allocation"]}
              rules={[
                ({ getFieldValue }) => ({
                  validator(_, value) {
                    console.log(
                      "fields value from allocation",
                      getFieldValue("allocation")
                    );
                    if (!value && getFieldValue("allocation") === "") {
                      return Promise.reject("please input allocation!");
                    }
                    return Promise.resolve();
                  },
                }),
              ]}
            >
              <Input disabled={uploadState.upload.formDisabled} />
     </Form.Item>

Answer 1

https://codesandbox.io/s/react-antd-form-array-fmp46?file=/index.js

我刚刚为您的问题编写了代码框 正如你在代码中看到的，你可以通过 form.getFieldValue(['userBeneficiary',${index},'allocation']) 获取值

更新：

根据您的要求，我已添加验证器。可以看到codeandbox

import React from 'react'
import ReactDOM from 'react-dom'
import { Form, Button, InputNumber } from 'antd'
import 'antd/dist/antd.css'
import './index.css'

const MyForm = () => {
  const mockdata = ['a', 'b', 'c']
  const [form] = Form.useForm()

  return (
    <Form form={form}>
      Hello
      {mockdata.map((item, index) => (
        <Form.Item
          label="Allocation "
          name={['userBeneficiary', `${index}`, 'allocation']}
          rules={[
            {
              required: true,
              message: 'This field is required!'
            },
            {
              type: 'number',
              message: 'Please input number!'
            },
            ({ getFieldValue }) => ({
              validator(rule, value) {
                if (index < mockdata.length - 1) {
                  return Promise.resolve()
                }
                let sum = 0
                for (let i in mockdata) {
                  sum += parseInt(
                    getFieldValue(['userBeneficiary', i, 'allocation']),
                    10
                  )
                }
                if (sum >= 100) {
                  return Promise.reject('Sum should be less than 100!')
                }
                return Promise.resolve()
              }
            })
          ]}
        >
          <InputNumber min={0} max={1000} />
        </Form.Item>
      ))}
      <Button type="primary" htmlType="submit">
        Submit
      </Button>
    </Form>
  )
}

ReactDOM.render(
  <div className="App">
    <MyForm />
  </div>,
  document.getElementById('root')
)