Support nested fields and arrays

[williamkhshea]

See #47

In input form

{getFieldDecorator('member[0].name.firstname', {})(<input/>)}
{getFieldDecorator('member[1].name.firstname', {})(<input/>)}

this.props.form.getFieldsValue() 返回数据结构为

members: [{ name: {firstname: "xxx"} }, { name: {firstname: "yyy"} }]

[coveralls]

Coverage increased (+5.005%) to 93.061% when pulling 9be77bd on williamkhshea:nested-field into 616ddd3 on react-component:master.

[alexggordon]

@williamkhshea just saw this. Upon validate, does this also return the same nested object?

IE, on submit, will it return

{member: [
     {name: {firstname: 'fdsafdsa'}},
     {name: {firstname: 'firstname_two'}}
]}

If it's doing this, then I'll close my PR in favor of this one.

[williamkhshea]

@alexggordon Yes, and errors will be nested object as well.

I have added an example called "nested-field" in the example folder. You can check it out and see what how the outputs look like.

[alexggordon]

Sweet job @williamkhshea.

[afc163]

👍

[yiminghe]

do not use lodash(especially too big for mobile), or at least use lodash-xx

[williamkhshea]

@yiminghe OK, I will update to use custom build of lodash

[williamkhshea]

@yiminghe How can I ignore the lint style checking for the lodash custom build file before I commit?

[yiminghe]

I mean something like https://www.npmjs.com/package/lodash.get

[coveralls]

Coverage increased (+5.07%) to 93.131% when pulling 75a854c on williamkhshea:nested-field into 616ddd3 on react-component:master.

[williamkhshea]

@yiminghe Dependencies updated. Please review.

[afc163]

Use https://github.com/mariocasciaro/object-path ?

[williamkhshea]

@afc163 Object-path uses only dot notation for array path (i.e. 'a.0'), unlike lodash which also supports bracket notation (i.e. 'a[0]'). It creates problems when you want to have numbers as keys of an object, says in case of IDs. It gives you an array instead of object with keys as IDs.

If you want to trim down the size of the libraries further, I would suggest you do a custom build on lodash get,has,set function and make an npm package, and I can use it as dependencies.

[yiminghe]

last change. please squash into one commit. ready to merge

thank you

[yiminghe]

expect(form.getFieldValue('foo')).to.eql({....})

[williamkhshea]

@yiminghe expect(...).to.eql does not handle sparse arrays (e.g. [undefined, 123]). See screenshot below.

[yiminghe]

ok, squash into one commit, and force push please

[williamkhshea]

@yiminghe done

[coveralls]

Coverage increased (+5.07%) to 93.131% when pulling 4aa1fab on williamkhshea:nested-field into 616ddd3 on react-component:master.

[williamkhshea]

@yiminghe I should have cleaned up my code before submitting. Thanks for helping out.

[acmeid]

我在使用嵌套写法的时候，并没有生效：

<FormItem label="数量" colon={false}>
  {getFieldDecorator('services[0].num', {
      rules: [{ required: true, message: '请输入数量' }],
   })(
      <InputNumber />
   )}
</FormItem>

services: [{
    num: {value: 1}
}]

[mkrn]

@williamkhshea Can this bug be related to this PR?
ant-design/ant-design#5835
Can you please give me a hint if you have this situation working (array of objects)

[nanxiaobei]

then setFieldsValue not work with nested assign, anyone know how to solve?

[benjycui]

@nanxiaobei please file a new issue and provide re-producible demo http://codepen.io/benjycui/pen/NdQdBw?editors=0011

[warmhug]

isFieldTouched seems also not work with nested.

[jarforjs]

then setFieldsValue not work with nested assign, anyone know how to solve?

me too,then i use setFiledsValue(()=>{setTimeout...}),Nevertheless, it seems to be successful, but there are still problems

[17601617393]

参见＃47

输入形式

{getFieldDecorator('member[0].name.firstname', {})(<input/>)}
{getFieldDecorator('member[1].name.firstname', {})(<input/>)}

this.props.form.getFieldsValue（）返回数据结构为

members: [{ name: {firstname: "xxx"} }, { name: {firstname: "yyy"} }]

id再转一下string类型就OK了

[Jiang-Xuan]

如果有人想要 key 里面含有 . 的话, 参考 lodash/lodash#3529 (comment)

[pkuphy]

楼上的方法可以，效果是这样的：

getFieldDecorator('["user.name"]', ...