ant-design: getFieldDecorator with nested field format is not allowing arrays of objects to setFieldsValue

Version

2.9.1

Environment

Mac OS, chrome, react ^15.4.2

Reproduction link

Steps to reproduce

When adding a getFieldDecorator for a field inside array of objects it prevents setFieldsValue from saving. This makes it hard to create repeatable sections.

Open codepen link, Click add button multiple times, it will not add more section, Remove line 36 {form.getFieldDecorator('pumps[' + index + '].make', { })(<Input />)}
And sections will be added

What is expected?

Expected to be able to add multiple sections of fields in array field.

What is actually happening?

New objects are not pushed to array by setFieldsValue when getFieldDecorator for nested field is present in render

I was trying to create a form with repeatable groups of fields (array of objects). Would appreciate working examples. Followed this example initially https://github.com/ant-design/ant-design/blob/master/components/form/demo/dynamic-form-item.md but extended it to allow multiple fields in each array/object.

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 16 (4 by maintainers)

Most upvoted comments

这个问题解决了么？或者有什么办法，能让一个数组源的项目能够展示出来，并且可以动态的增删呢？急~

zhongkai on Jun 13, 2017

I got a way to solve this:

const columns = this.props.form.getFieldValue('columns');
const newColumns = columns.map((item, idx) => {
  if(idx === index) {
    return Object.assign({}, item, {name: value});
  }

  return item;
});

this.props.form.setFieldsValue({
  columns: newColumns,
});

dzoneo on Aug 23, 2017

Now removing an item from array doesn’t work

remove = (k) => {
    const { form } = this.props;
    const { getFieldValue, setFieldsValue } = form;
    const pumps = getFieldValue('pumps');

    setFieldsValue({
      pumps: pumps.filter((key, index) => k !== index),
    });
  }

mkrn on Apr 24, 2017