Ant.design does not detect custom input component in Form.Item React

user_14390768 0
Viewed 736

So, the main problem is, that antd form does not detect my custom input based on antd standard input: There is a piece of form code (AddProduct):

                   <Form.Item
                        className="m-t-10"
                        name="price"
                        rules={[
                            {
                                required: true,
                                message: `${t('FORM.ERR.SHOP.PRICE')}`,
                            },
                        ]}
                    >
                        <CurrencyInput size="small" placeholder={t('FORM.SHOP.PRICE_VAT')} name="price" />
                    </Form.Item>

There is my custom input (CurrencyInput):

return (
    <Input size={props.size} placeholder={props.placeholder} name={props.name} type="number" prefix={settings[6].value} />
)

The problem is when I try to submit the form it does not detect currency input, throws err that this field is required. Any ideas are it possible to implement custom input, basically, it's more HOC than custom input

react-redux antd typescript reactjs forms
1 Answers

You need to pass to your custom component all props, because Form.Item pass to there onChange and value props

function CustomInput({size, placehodler, name, ...restProps}) {
  return (
    <Input size={size} placeholder={placeholder} name={name} 
      type="number" prefix={settings[6].value} {...restProps} />
  )
}
user_134107600
Related