using antd with redux-form

Question

I'm trying to use ant.design react components with my redux-form, so far it goes something like this:

import { Form, Input } from 'antd';
import { Field, reduxForm } from 'redux-form/immutable';
const FormItem = Form.Item;

.....

<FormItem>
  <Field
     component={Input}
     placeholder="First Name"
     name="name"
  />
</FormItem>

seems like antd form inputs don't support name attribute, they ignore and prevent to pass it down.

name attribute is needed for redux-form to be working.

does anyone had success to get these 2 working together? thank you.

Answer 1

In addition to Maxim answer, I had to pass redux-form props.input comp to antd Input component.

const NewInput = ({
        label,
        labelCol,
        wrapperCol,
        help,
        extra,
        validateStatus,
        hasFeedback = true,
        colon,
        ...rest
}) => {
  return (<FormItem
    label={label}
    wrapperCol={wrapperCol}
    labelCol={labelCol}
    help={help}
    hasFeedback={hasFeedback}
    extra={extra}
    validateStatus={validateStatus}
    colon={colon}
  >
    <Input {...rest.input} />
  </FormItem>);
};

Answer 2

Generally speaking, you should not wrap redux-form Field component in the antd Form.Item component. Instead, you should create your own component:

<FormItem>
  <Input/>
</FormItem>

and pass this component into the Field.component. However, it does not sound cool, so you should consider using https://github.com/zhdmitry/redux-form-antd. This lib already have set of antd components wrapped in the Form.Item, so in your case it is just

<Field name="name" component={TextField} />