antd Form.List内字段的关联校验

最新推荐文章于 2024-04-17 10:50:49 发布

夕阳与影

最新推荐文章于 2024-04-17 10:50:49 发布

阅读量1.6k

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_41648043/article/details/130039183

版权

引言
近期碰到一个需求，需要一个列表式的表单提交，列表内每一项之间都存在关联校验
实现

import React from 'react';
import { Form, Input, Button } from 'antd';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import { ObjectAny } from '@/utils/utils';

interface IProps {
    initValues: ObjectAny[];
}
 
const FormListTest = () => {
  const [form] = Form.useForm()
 
  const onFinish = (values: ObjectAny) => {
    console.log(values)
  }

  return (
    <>
      <Form className='edit-form' form={form} onFinish={onFinish} initialValues={{
        myPhones: [{}]
      }} >
        <Form.List name='myPhones'>
          { (fields, { add, remove }) => {
            const list =  fields.map((field: ObjectAny, index: number) => (
              <>
                <Button onClick={() => remove(field.name)}>删除联系方式</Button>
                <Form.Item
                  rules={[
                    {pattern: /^\d{5}$/, message: '请输入5位数字'},

                  ]}
                  name={ [field.name, 'phoneNumber'] }
                  fieldKey={ [field.fieldKey, 'phoneNumber'] }
                >
                  <Input placeholder='请输入直线或短号' />
                </Form.Item>
                <Form.Item
                  rules={[
                    {
                      validator(_, value: string, callback) {
                          if (value.match(/^\d{5}$/)) {
                              callback();
                          } else {
                              callback('请输入5位数字');
                          }
                      }
                    },
                    ({ getFieldValue }) => ({
                      validator(_, value) {
                        // 注意，获取依赖项前一定要先判断myPhones[field.name]是否为undefined（在这里踩过坑）
                        const phoneNumber = getFieldValue('myPhones')[field.name]?.phoneNumber;
                        if (value && (phoneNumber === '' || phoneNumber === undefined)) {
                          return Promise.reject(new Error("请输入直线或短号"));
                        }
                        return Promise.resolve();
                      },
                    }),
                  ]}
                  // 留意dependencies的写法：Form.List的名字 field.name 字段名
                  dependencies={[['myPhones', field.name, 'phoneNumber']]}
                  name={ [field.name, 'phoneNumberExtend'] }
                  fieldKey={ [field.fieldKey, 'phoneNumberExtend'] }
                >
                  <Input placeholder='分机号' />
                </Form.Item>
              </>
            ));
            list.push(<Button type='primary' onClick={() => add()}>添加座机</Button>);
            return list;
          }}
        </Form.List>
        
        <Form.Item
            name="mobile"
            label="手机"
            rules={[
                {
                    validator(_, value: string, callback) {
                        if (value.match(/^(1[3-9])\d{9}$/)) {
                            callback();
                        } else {
                            callback('手机号格式有误');
                        }
                    }
                }
            ]}
        >
            <Input />
        </Form.Item>
        <Form.Item>
          <Button htmlType='submit' type='primary'>
            Submit
          </Button>
        </Form.Item>
      </Form>
    </>
  )
}
 
export default FormListTest;