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.

• javascript
• dynamic
• antd

2 Answers 2

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