Ant 设计 4 验证来自数组的表单项

Question

I have rendered a form item using an array. I want to write a custom validation to check whether the allocation fields sum up too 100 and not more or less than 100. How do I get the related allocation fields using 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

I've just written the codesandbox for your problem As you can see on the code, you can get the value by form.getFieldValue(['userBeneficiary', ${index} ,'allocation'])

Update:

According to your request, I've added the validators. You can see the codesandbox

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')
)