How to Create Ant Design group of Dynamic fields

Question

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.

Answer 1

Yes, it is possible to create a nested dynamic form using ant design dynamic form component. 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.