How to Get Field Value on Change for Formitem in Antd

How to custom value of Form Field in AntD?

Antd Form gives us the values when submitting the form of all the form control inputs in the form of the object where the key would be the name of the form control inputs and value would be the value given by the user.

The best practice which I know about is that we should never change the input values before submitting the form manually otherwise our form may show unexpected behavior which we can't figure out.

However, if you want to do a post request with a payload of data that is slightly different than the form values, then you can modify the form data before submitting the request.

const [formValues, setFormValues] = useState()

const onFinish = (values) => {
  console.log("Values received:", values);

  // modify the form value here 
  // remember don't change `values`, preserve the form value in some other variable or state.
  const keys = Object.keys(changedValues);
  
  let newValues = { [keys[0]]: { [keys[0]]: changedValues[keys[0]]} }
  
  console.log(newValues);

};


return (
  <Form name="user_information" onFinish={onFinish}>
    <Form.Item
      label="Email"
      name="email"
      rules={[
        {
          required: true,
          message: "Your email cannot be empty!",
        },
      ]}
    >
      <Input placeholder="Enter your email" />
    </Form.Item>

    <Form.Item>
      <Button type="primary" htmlType="submit">
        Update now
      </Button>
    </Form.Item>
  </Form>
);

Value not updating for Input inside ANTD Form.Item

Fixed by following this code sample from ANTD.

Basically I added following lines to call the form method.

const [form] = Form.useForm();

Then assigning the input values in the onChangeAll listener in the keyboard component as follows:

      const onChangeAll = (inputs) => {
        setInputs({ ...inputs });
        form.setFieldsValue({
          username: `${inputs.inputUserName}`,
          password: `${inputs.inputPassword}`,
    });
   };  

Also don't forgot to add this line in the Form component

  <Form
    form={form}
    ...
  >

Validate antd form input in onChange with the value return by back-end API call

There is a method named form.validateFields(['array of input names need to validate']) provided by antd Form for field validations.

With that I was able to re-execute the validation of the schoolId input when response come for idStatus inside a useEffect as below.

useEffect(() => {
// manually validate the field since input is not validated by form once state update.
form.validateFields(['schoolId']);
}, [idStatus]);

With the above way, we can manually trigger validation for particular Form.Item in antd Form wherever we want.

defaultValue or value not working on FormItem ANTD

The docs states that:

You cannot set value of form control via value defaultValue prop, and you should set default value with initialValue in getFieldDecorator instead.

You shouldn't call setState manually, please use this.props.form.setFieldsValue to change value programmatically.

So you just need to call setFieldsValue when the data is loaded from the backend:

fetch('http://localhost:5728/Fields/get/' + this.state.Data.Id)
      .then(results=>{
        return results.json()
      })
      .then(data=>{

        this.props.form.setFieldsValue({
                Id: data.field.Id,
                Name: data.field.Name,
                Description: data.field.Description,
                Value: data.field.Value
          })
      })

Or shorter, if data.field from backend totally matches the field names:

this.props.form.setFieldsValue(data.field)

---

Related Topics