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

短命女 2022-05-16 02:25 231阅读 0赞

我不知道应该怎么描述这个功能才算清晰，看图吧  
![这里写图片描述][70]  
环境是在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); } });

看一下最终的效果  
![这里写图片描述][70 1]

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

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

[70]: /images/20220516/1bbcf475978b40ddbc02a18c05346afa.png
[70 1]: /images/20220516/ced6270d172b49a381aa7b5719527901.png