最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to Create Ant Design group of Dynamic fields - Stack Overflow

programmeradmin1浏览0评论

I'm using ant design dynamic form. How I suppose to create a group of dynamic forms

Code:

Scenario

User need to enter the team name and team members name dynamically. Is it possible add the dynamic fields inside the dynamic field by ant design.

I'm using ant design dynamic form. How I suppose to create a group of dynamic forms

Code: https://codesandbox.io/s/vvl2yxqr5l

Scenario

User need to enter the team name and team members name dynamically. Is it possible add the dynamic fields inside the dynamic field by ant design.

Share Improve this question asked Sep 24, 2018 at 15:40 SelvinSelvin 8157 gold badges13 silver badges22 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 3

Yes, it is possible to create a nested dynamic form using ant design dynamic form ponent. I have also asked the same question How to create a questionnaire type form using Ant Design?. You need to add your own logic but here I am providing the basic structure:

To remove team name:

remove = k => {
    const { form } = this.props;
    const keys = form.getFieldValue("newkeys");
    form.setFieldsValue({
      newkeys: keys.filter(key => key !== k)
    });
};

To add team name:

add = () => {
    const { form } = this.props;
    const keys = form.getFieldValue("newkeys");
    const nextKeys = keys.concat(uuid);
    uuid++;
    form.setFieldsValue({
      newkeys: nextKeys
    });
};

To remove team member:

remove1 = (k, l) => {
    const { form } = this.props;
    const keys = form.getFieldValue("answerkey" + k);
    let newkeys = [];
    if (keys) {
      newkeys = keys;
    } else {
      newkeys = [];
    }
    form.setFieldsValue({
      ["answerkey" + k]: newkeys.filter(key => key !== l)
    });
};

To add team member:

add1 = index => {
    const { form } = this.props;
    const keys = form.getFieldValue("answerkey" + index);
    let newkeys = [];
    if (keys) {
      newkeys = keys;
    } else {
      newkeys = [];
    }
    const nextKeys = newkeys.concat(uuid1);
    uuid1++;
    form.setFieldsValue({
      ["answerkey" + index]: nextKeys
    });
};

I have created a working demo on codesandbox.io.

From above answer, I was trying to remove a team name with remove() function but getting some problem and i found this

Use map instead of loop, as map brings values at line 7 after render()

newkeys.map((i) => {
    getFieldDecorator("answerkey" + i, { initialValue: [] });
})

Demo video

发布评论

评论列表(0)

  1. 暂无评论