antd design Form动态增减表单项(多个),组装数据及编辑回显,选择初始值,控制添加减少表单项数量等

新增效果图如下

在这里插入图片描述
编辑效果图如下
在这里插入图片描述
代码如下

const {
      salesFollow: { info },
      form: { getFieldDecorator, getFieldValue },
    } = this.props;

const formItemLayout = {
      labelCol: { span: 4 },
      wrapperCol: { span: 12 },
    };
    getFieldDecorator('keys', { initialValue: info.timeList ? info.timeList : [] });
    const keys = getFieldValue('keys') ? getFieldValue('keys') : [];
    const paramFormItems = keys.map((k, index) => (
      <Row key={k.id}>
        <FormItem
          style={{marginBottom:0}}
          {...(formItemLayout)}
          label={getFieldDecorator(`paramTime_${k.id}`, {
            initialValue: k.startTime ? moment(k.startTime) : null,
          })(
            <DatePicker
              format='YYYY-MM-DD'
              placeholder="请选择日期"
            />
          )}
          key={k.index || k.index === 0 ? k.index : k}
          required={false}
          colon={false}
        >
          <Row type="flex">
            <Col>
              <FormItem style={{ marginLeft: 10, marginBottom:0 }}>
                {getFieldDecorator(`paramStart_${k.id}`, {
                  initialValue: k.startTime ? moment(k.startTime) : null,
                })(
                  <TimePicker
                    format=" HH:mm "
                    placeholder="开始时间"

                  />
                )}
              </FormItem>
            </Col>
            <Col>
              <FormItem style={{ marginLeft: 10, marginBottom:0 }}>
                {getFieldDecorator(`paramEnd_${k.id}`, {
                  initialValue: k.endTime ? moment(k.endTime) : null,
                })(
                  <TimePicker
                    format=" HH:mm "
                    placeholder="结束时间"
                  />
                )}
              </FormItem>
            </Col>
            <Col>
              <FormItem style={{marginBottom:0}}>
                <Icon
                  style={{ marginLeft: 10 }}
                  className="dynamic-delete-button"
                  type="minus-circle-o"
                  onClick={() => this.remove(index)}
                />
              </FormItem>
            </Col>
          </Row>
        </FormItem>
      </Row>
    ));
             <Row span={24} style={myStyle.rowStyle}>
                <Col span={24}>可上课时间:
                  {
                    paramFormItems
                  }
                </Col>
              </Row>
              <Row span={24} style={myStyle.rowStyle}>
                <Col span={8}>
                  <Button type="dashed" style={{ width: '50%' }} onClick={this.add}>
                    <Icon type="plus" /> 添加可上课时间
                  </Button>
                </Col>
              </Row>

增加,减少表单项方法

    remove = (k) => {
    // can use data-binding to get
    const keys = this.props.form.getFieldValue('keys');
    _.remove(keys,(d, i) => i === k );
    // We need at least one passenger
    // can use data-binding to set
    this.props.form.setFieldsValue({
      keys,
    });
  };

  add = () => {
    // can use data-binding to get
    const keys = this.props.form.getFieldValue('keys');
    const nextKeys = keys.concat([{ id: uuid }]);
    uuid++;
    // can use data-binding to set
    // important! notify form to detect changes
    this.props.form.setFieldsValue({
      keys: nextKeys,
    });
  };

控制添加表单的个数可以通过控制keys的长度来实现

  add = () => {
    const { form } = this.props;
    // can use data-binding to get
    const keys = form.getFieldValue('keys');
    if (keys.length === 1) {
      message.error("最多只能添加一个!");
      return;
    }
    const nextKeys = keys.concat([{ id: uuid }]);
    // can use data-binding to set
    // important! notify form to detect changes
    form.setFieldsValue({
      keys: nextKeys,
    });
  };
  remove = (k) => {
    // can use data-binding to get
    const keys = this.props.form.getFieldValue('keys');
     if (keys.length <= 1) {
      message.error('请至少保留一个');
      return;
    }
    _.remove(keys,(d, i) => i === k );
    // We need at least one passenger
    // can use data-binding to set
    this.props.form.setFieldsValue({
      keys,
    });
  };

提交表单组装数据方法

   handleSubmit = () => {
    const { form, } = this.props;
    form.validateFields((errors, values) => {
      const timeList = [];
      for (let i = 0; i <= uuid; i++) {
        if (values[`paramTime_${i}`]) {
          if (!values[`paramStart_${i}`] || !values[`paramEnd_${i}`]) {
            message.error('请选择上课时间');
            return;
          }
          const time = values[`paramTime_${i}`] ? moment(values[`paramTime_${i}`]).format('YYYY-MM-DD') : null;
          const start = values[`paramStart_${i}`] ? moment(values[`paramStart_${i}`]).format('HH:mm:ss') : null;
          const end = values[`paramEnd_${i}`] ? moment(values[`paramEnd_${i}`]).format('HH:mm:ss') : null;
          timeList.push({
            queryStartDate: `${time } ${ start}`,
            queryEndDate: `${time } ${ end}`,
          });
        }
      }
      console.info('timeList', timeList);
    });
  };

数据
在这里插入图片描述
组装数据前
在这里插入图片描述
组装数据后
在这里插入图片描述
引用到的组件

 import moment from 'moment';
 import { Button, Card,Cascader, Row, Col, message, DatePicker, Input, Form, Icon } from 'antd';
 import TimePicker from 'antd/es/time-picker';
 const FormItem = Form.Item;
 let uuid = 100000;

编辑回显数据如下
在这里插入图片描述
在这里插入图片描述
因为用的是时间控件,所以提交和编辑回显的时候都需要做时间格式化处理,如果是其他控件可以省略这一步。

新增表单时控制初始化数据可以通过控制keys的长度来实现,如默认显示2个
在这里插入图片描述

getFieldDecorator('keys', { initialValue: info.timeList.length > 0 ? info.timeList : [1,2] });
  • 3
    点赞
  • 28
    收藏
    觉得还不错? 一键收藏
  • 6
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值