how to get field value on change for FormItem in antd

When working with form components in Ant Design (antd), such as Form and FormItem, it is often necessary to retrieve field values upon changes to a FormItem for performing operations or validations. Ant Design provides several approaches to achieve this, including:

1. Using onFieldsChange and onValuesChange Callbacks

Ant Design's Form component offers two callback functions, onFieldsChange and onValuesChange, for capturing changes to field values.

onValuesChange

This callback is invoked when form field values change, passing all current form values as parameters.

jsx
import React from 'react';
import { Form, Input } from 'antd';

const Demo = () => {
  const handleValuesChange = (changedValues, allValues) => {
    console.log('Changed:', changedValues);
    console.log('All Values:', allValues);
  };

  return (
    <Form onValuesChange={handleValuesChange}>
      <Form.Item
        name="username"
        label="Username"
        rules={[{ required: true, message: 'Please input your username!' }]}>
        <Input />
      </Form.Item>
    </Form>
  );
};

export default Demo;

In the above example, the handleValuesChange function is triggered whenever any form field value changes, logging both the changed field values and all current field values.

onFieldsChange

This callback provides more detailed information, including the field's state and name.

jsx
import React from 'react';
import { Form, Input } from 'antd';

const Demo = () => {
  const handleFieldsChange = (changedFields, allFields) => {
    console.log('Changed Fields:', changedFields);
    console.log('All Fields:', allFields);
  };

  return (
    <Form onFieldsChange={handleFieldsChange}>
      <Form.Item
        name="username"
        label="Username"
        rules={[{ required: true, message: 'Please input your username!' }]}>
        <Input />
      </Form.Item>
    </Form>
  );
};

export default Demo;

In this example, whenever any property of a form field changes (such as its value, touched status, or validation status), the handleFieldsChange function is called.

2. Using Form.Item's getValueFromEvent

If you only need to handle changes for a specific form item, you can use the getValueFromEvent property of Form.Item to customize the processing of the form control's value.

jsx
import React from 'react';
import { Form, Input } from 'antd';

const CustomInput = ({ value, onChange }) => (
  <Input value={value} onChange={e => onChange(e.target.value.toUpperCase())} />
);

const Demo = () => {
  return (
    <Form>
      <Form.Item
        name="username"
        label="Username"
        getValueFromEvent={(event) => {
          // Custom logic can be added here
          return event.target.value.trim();
        }}
      >
        <CustomInput />
      </Form.Item>
    </Form>
  );
};

export default Demo;

In the above code, we process the input value using getValueFromEvent, for example, trimming whitespace from the string. This way, whenever the form item's value changes, we can obtain the processed value.

By using these methods, you can flexibly retrieve and handle changes to field values in Ant Design forms, which is useful for creating dynamic and responsive user interfaces.