使用antd开发可动态增加项的表单

最新推荐文章于 2025-07-04 16:00:14 发布

1091214370的博客

最新推荐文章于 2025-07-04 16:00:14 发布

阅读量3.1w

点赞数 11

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： antd

本文链接：https://blog.youkuaiyun.com/qq_34149935/article/details/81670248

JavaScript 专栏收录该内容

33 篇文章

订阅专栏

本文介绍如何使用 Ant Design 的 Form 组件实现用户输入异常情况通知方式及联系人信息的功能，包括表单验证、动态增删表单项及数据结构化处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我不知道应该怎么描述这个功能才算清晰，看图吧
这里写图片描述
环境是在antd的Form组件内开发大概的功能如下：

用户需要选择异常情况通知方式，并填写最少一个最多三个的联系人姓名和联系方式。
期望用户点击加号，可以增加一条，最多三条。
内容需校验，输入不能为空，联系方式需要根据用户勾选的通知方式校验输入内容，即用户勾选短信时，联系方式校验规则为手机号，勾选邮件时，校验方式为邮箱。
输入部分的数据结构应为数组，数据展示时可以通过遍历数组方便数据展示。并且联系人称呼和联系方式存在对应关系。

一言不合上代码

组件部分


<FormItem
            {...formItemLayout}
            label="异常情况通知"
          >{getFieldDecorator('contactType', {
            initialValue: data.contactType,
            rules: [{
              required: true,
              message: '订单消息通知至少选择一个渠道！',
            }],
          })(
            <Radio.Group onChange={e => oncontactType(e)} disabled={!data.informWay}>
              <Radio value="0">短信</Radio>
              <Radio value="1">邮件</Radio>
            </Radio.Group>,
            )}
          </FormItem>
          <FormItem
            {...submitFormLayout}
          >
            <div className="informWay" >
              { data.informWay && data.informWay.map((element, index) => (
                <span key={index}>
                  <FormItem>
                    {getFieldDecorator(`man${index}`, {
                      initialValue: element.name,
                      rules: [{
                        required: true,
                        message: '请输入联系人称呼!',
                      }],
                    })(
                      <Input placeholder="请输入联系人称呼" />,
                      )}
                  </FormItem>
                  <FormItem>
                    {getFieldDecorator(`link${index}`, {
                      initialValue: element.link,
                      rules: [{
                        required: true,
                        message: '请输入联系方式!',
                      }, {
                        pattern: contactType === '0' ? /^0?(13[0-9]|15[012356789]|17[013678]|18[0-9]|14[57])[0-9]{8}$/ : /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
                        message: contactType === '0' ? '手机号码格式错误！' : '邮箱格式错误',
                      }],
                    })(
                      <Input placeholder="请输入联系方式" />,
                      )}
                  </FormItem>
                  {index < 2 && <Button shape="circle" size="small" icon="plus" type="primary" onClick={() => onLinkWay(index, 'add')} />}
                  {index > 0 && <Button shape="circle" size="small" icon="minus" type="default" onClick={() => onLinkWay(index, 'minus')} />}
                </span>
              ))}
            </div>
          </FormItem>

数据拼接部分

    validateFields((err, values) => {
      // 用新的对象承载提交的数据
      const abc = {
        ...values,
        informWay: [],
      };
      const arr = []; // 保存输入框内的值
      const arrD = []; // 保存key值
      const test = /^(link)|(man)\d$/;
      // 拿到异常通知相关输入的所有值
      if (!err) {
        // eslint-disable-next-line
        for (const key in abc) {
          if (test.test(key)) {
            arr.push(abc[key]);
            arrD.push(key);
          }
        }
        // 进行数据拼装
        const arr1 = arr.map((ele, i, a) => {
          if (i % 2 === 0) {
            const obj = {};
            obj.contactName = ele;
            obj.contactWay = a[i + 1];
            return obj;
          }
          return null;
        }).filter(ele => ele !== null);
        abc.informWay = arr1;
        arrD.forEach(ele => delete abc[ele]); // 删除多余键值对
        onSubmit(abc);
      }
    });

看一下最终的效果
这里写图片描述

最后贴一下组件的数据结构吧

informWay:[
{contactName:'',contactWay:''},
{contactName:'',contactWay:''},
]