一般用form.validateFields(['name1', 'name2'...])
来做表单的局部校验, 但如果表单中有个<Form.list name='users'>
,只需要校验name='users'
的表单项目时,用form.validateFields(['users'])
无法生效,官方api找不到相应的方案。
业务场景
有下列表单,某一业务需求需要只较验表单中Form.List name="users"
的项目,或只较验其中的一行,对其它项目忽略检查。
<Form form={form}>
<Form.List name="users">
{(fields, { add, remove }) => {
return (
<div>
{fields.map((field,index) => (
<Space key={field.key} style={{ display: 'flex', marginBottom: 5, justifyContent: 'center' }} align="start">
<Form.Item
{...field}
name={[field.name, 'firstName']}
fieldKey={[field.fieldKey, 'firstName']}
rules={[{ required: true, message: 'please input firstName' }]}
>
<Input placeholder="first name" />
</Form.Item>
<Form.Item
{...field}
name={[field.name, 'lastName']}
fieldKey={[field.fieldKey, 'lastName']}
rules={[{ required: true, message: 'please input lastName' }]}
>
<Input placeholder="last name"/>
</Form.Item>
</Space>
))}
<Form.Item style={{width:'50%', margin:'0 auto'}}>
<Button type="dashed" onClick={() => { add(); }} block>
<PlusOutlined /> 添加行
</Button>
</Form.Item>
</div>
)
}}
</Form.List>
<Form.Item
label="分组"
name="group"
rules: [{ required: true, message: '请输入预付款金额' }]
>
<Input />
</Form.Item>
</Form>
实现方法
//单行验证, index代表的是第几行数据
form.validateFields([['users', index, 'firstName'], ['users', index, 'lastName']]).then(values => {
console.log(values.users[index].firstName, values.users[index].lastName)
});
//整个users验证需要把每行的field name传进去,暂未找到别的解决方案
form.validateFields([
['users', 0, 'firstName'], ['users', 0, 'lastName'],
['users', 1, 'firstName'], ['users', 1, 'lastName']
...
])