Support nested objects and array

[williamkhshea]

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"} }]

[kkccww21]

import { Form, Input, Icon, Button } from 'antd';
const FormItem = Form.Item;

let uuid = 0;
class DynamicFieldSet extends React.Component {
remove = (index) => {
const { form } = this.props;
// can use data-binding to get
const items = form.getFieldsValue()['items'];
// We need at least one passenger
if (items.length === 1) {
return;
}

// can use data-binding to set
form.setFieldsValue({
  items: items.filter((item,i) => i !== index),
});

}

add = () => {
const { form } = this.props;
// can use data-binding to get
let formValues = form.getFieldsValue();
const items = formValues['items'] || [];
items.push({name1:'1',name2:'2'});
formValues.items = JSON.parse(JSON.stringify(items));
// can use data-binding to set
// important! notify form to detect changes
form.setFieldsValue(formValues);
}

handleSubmit = (e) => {
e.preventDefault();
this.props.form.validateFields((err, values) => {
if (!err) {
console.log('Received values of form: ', values);
}
});
}

render() {
const { getFieldDecorator, getFieldValue,getFieldsValue } = this.props.form;
const formItemLayout = {
labelCol: {
xs: { span: 24 },
sm: { span: 4 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 20 },
},
};
const formItemLayoutWithOutLabel = {
wrapperCol: {
xs: { span: 24, offset: 0 },
sm: { span: 20, offset: 4 },
},
};
getFieldDecorator('items',{initialValue:[]});
let formValues = getFieldsValue();
const items = formValues['items']||[];
const formItems = items.map((k, index) => {
return (
<div key={'1_'+index}>
<FormItem
{...(index === 0 ? formItemLayout : formItemLayoutWithOutLabel)}
label={index === 0 ? 'Passengers' : ''}
>
{getFieldDecorator(items[${index}].name1, {
validateTrigger: ['onChange', 'onBlur'],
rules: [{
required: true,
whitespace: true,
message: "Please input passenger's name or delete this field.",
}],
})(
<Input placeholder="passenger name1" style={{ width: '30%', marginRight: 8 }} />
)}


{getFieldDecorator(items[${index}].name2, {
validateTrigger: ['onChange', 'onBlur'],
rules: [{
required: true,
whitespace: true,
message: "Please input passenger's name or delete this field.",
}],
})(
<Input placeholder="passenger name2" style={{ width: '30%', marginRight: 8 }} />
)}
{items.length > 1 ? (
<Icon
className="dynamic-delete-button"
type="minus-circle-o"
disabled={items.length === 1}
onClick={() => this.remove(index)}
/>
) : null}


);
});
return (

{formItems}
<FormItem {...formItemLayoutWithOutLabel}>
<Button type="dashed" onClick={this.add} style={{ width: '60%' }}>
Add field


<FormItem {...formItemLayoutWithOutLabel}>
Submit


);
}
}
const WrappedDynamicFieldSet = Form.create()(DynamicFieldSet);
export default WrappedDynamicFieldSet;

This code has problem, fake nested form!!!