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

Question

我已经使用数组呈现了一个表单项。我想写一个自定义验证来检查分配字段的总和是否超过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(['userBenefit'，${index}，'allocation'](

更新：

根据您的要求，我已经添加了验证器。你可以看到代码沙盒

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