how to get field value on change for FormItem in antd

setfieldsvalue antd
you cannot set a form field before rendering a field associated with the value.
antd text
'getfielddecorator' is not defined
antd select onchange event
wrappedcomponentref antd
antd hidden input
antd input readonly

I am having a hard time with antd's form. I have this select field in this form and I want to get the value from it onChange but somehow not getting it to work properly.

say this is the item for which I want the values

<FormItem
  {...formItemLayout}
  label={fieldLabels.qcategoryid}
  validateStatus={categoryError ? "error" : ""}
  help={categoryError || ""}
>
  {getFieldDecorator("qcategoryid", {
    rules: [{ required: true, message: "Please select Category!" }],
    onChange: this.handleCategoryChange
  })(<Select>{categoryOptions}</Select>)}
</FormItem>

this is the categoryOptions

if (this.props.categories) {
  categoryOptions = this.props.categories.map(item => (
    <Select.Option
      key={item.categoryid}
      value={item.categoryid}
      name={item.categoryname}
    >
      {item.categoryname}
    </Select.Option>
  ));
}

I want both the name of the category and the id so I created a handleCategoryChange which gets called onChange and I am able to get the fields I want.

But, it seems that now, I have to click twice on the field to properly select it. If I click it just once then it does show up in the console. but the field on the form still remains empty. when I click it again, then the field shows up in the form too.

So, what am I doing wrong here. Ah,yes! Here's the handleCategoryChange function

handleCategoryChange = (value, e) => {
  console.log("value is : ", value);
  console.log("e : ", e);
  this.props.form.setFieldsValue({ qcategoryid: value });
  this.setState({
    categorySelected: value,
    categoryname: e.props.name
  });
};

Just to make myself clear. I need those values before I click submit. not on submit.


Try this:

<FormItem
  {...formItemLayout}
  label={fieldLabels.qcategoryid}
  validateStatus={categoryError ? "error" : ""}
  help={categoryError || ""}
>
  {getFieldDecorator("qcategoryid", {
    rules: [{ required: true, message: "Please select Category!" }]
  })(<Select onChange={this.handleCategoryChange}>{categoryOptions}</Select>)}
</FormItem>

And on the handleCategoryChange function

handleCategoryChange = (value, e) => {
  this.setState({
    categorySelected: value,
    categoryname: e.props.name
  });
};

Basically, changing the onChange from the getFieldDecorator helper to the Select, so it doesn't mess with antd's natural behavior, but gets the value and change on state

I've based this answer on the code to the registration form on their website. Specifically, the handleWebsiteChange function

https://ant.design/components/form/#components-form-demo-register

Form, Includes layout, initial values, validation and submit. Select a option and change input text above If you are using class component, you can get it by ref . I want to console key and value of particular input field on change `const { Row, Col, Input, Form, Select, InputNumber, Radio, } from 'antd'; const FormItem = Form


I realize this is super late, but I think this might be what OP was looking for:

https://github.com/react-component/form/blob/3b9959b57ab30b41d8890ff30c79a7e7c383cad3/examples/server-validate.js#L74-L79

To set fields on a form dynamically, e.g. in a child via a callback, you could use

    this.props.form.setFields({
      user: {
        value: values.user,
        errors: [new Error('forbid ha')],
      },
    }); 

in a parent defined handleSelect method you called from the child on a selected value. you can alternatively use setFieldsValue if you dont want to pass an error field

getFieldDecorator on change key and value · Issue #4735 · ant , This is not working getFieldDecorator on change key and value handleSelectChange(e){ I want to console key and value of particular input field on change `const { Row, Col, Input, Form, Select, InputNumber, Radio, } from 'antd'; const FormItem = Form. How to get total event response for InputNumber​? You can do a lot with the simple ability to get and set form field values. The following post will get into the myEvolv functions getFormElement and setFormElement. getFormElement() The getFormElement function returns the value that is entered in a form field. The function takes a single argument– elementName. getFormElement(elementName); The elementName is the name of the column used for the form field, NOT the caption. So for example, if I want to get the value of the Actual Date/Time


A quick response, and hopefully a quick solution. Rather than using onChange you may want to use onSelect/onDeselect handlers, per the documentation (https://ant.design/components/select/):

<Select onSelect={handleCategoryChange} .../>

I have found also that SELECT and other input components, due to their custom html nature operate differently, and so in my forms, I have often created them as dummy fields that are using to alter text/hidden inputs in order to achieve the desired behaviours in complex forms.

Either I am doing something wrong, or the ANT way is mildly annoying.

Hope this helps.

Form, Form is used to collect, validate, and submit the user input, usually contains various form items including Form Item Component Select a option and change input text above Use setFieldsValue to set other control's value programmaticly. If this form item has a specified optionDataSource and fetchMissingValues is true, when the item value changes, a fetch will be performed against the optionDataSource to retrieve the related record if displayField is specified and the new item value is not present in any valueMap explicitly specified on the item.


Form - Ant Design, Form is used to collect, validate, and submit the user input, usually contains various form items including checkbox, horizontal :to horizontally align the label s and controls of the fields. <Form.Item {props}> {children} </Form. mapPropsToFields, Convert props to field value(e.g. reading the values from Redux store). In the item property there should be a reference to a record. What you could do is use a collection in which you store the item that you want to use on the form and reference that record in the 'item'-property.


defaultValue or value not working on FormItem ANTD, Name} onChange={this.onChange} /> )} </FormItem> Am I missing something? I even used input instead of Input EDIT On componentDidMount method I get the  Form. High performance Form component with data scope management. Including data collection, verification, and styles. When to use #. When you need to create an instance or collect information.


<Field /> · Formik, Formik will automagically inject onChange , onBlur , name , and value props of the field designated by the name prop to the (custom) component. children can  In Adobe Acrobat, how a form field behaves is determined by settings in the Properties dialog box for that individual field. You can set properties that apply formatting, determine how the form field information relates to other form fields, impose limitations on what the user can enter in the form field, trigger custom scripts, and so on.