Ant design 4 проверяет элементы формы из массива

Question

Я новичок в ant design, я рендерил элемент формы, используя массив. Я хочу написать пользовательскую проверку, чтобы проверить, суммируют ли поля выделения слишком 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

Я только что написал коды и поле для вашей проблемы. Как видно из кода, вы можете получить значение в форме. getFieldValue (['userBeneficiary', ${index}, 'allocation]])

Обновление:

По вашему запросу я добавил валидаторы. Вы можете увидеть коды andbox

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