Antd 4.x form.list组件的局部校验

9,745 阅读1分钟

一般用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']
    ...
  ])