With Form Antd, how to catch values change with setFieldValue()?

Question

I want to catch event from setFieldValue(), with Antd Form.

CodeSandBox code

In this code, if you write on the Input, the functions onFieldsChange and onValuesChange will be triggered.

But if you click on the button click me, the function setFieldValue() is called to update the value of the Input, but the two function are not called.

Thank to anyone can help me.

EDIT

This doesn't seem feasible...

setFieldsValue do not trigger onFieldsChange or onValuesChange?

It's by design. Only user interactive can trigger the change event. This design is aim to avoid call setFieldsValue in change event which may makes loop calling.

Antd Documentation about this

Answer 1

It's possible to trigger only onFieldsChange event when setting fields to form. Take a look here.

You just need to add rules to form fields (yes, you will use it to validate form values) then call form.validateFields right after setting values:

<Form
  name="basic_form"
  form={form}
  // can be triggered by rule validation
  onFieldsChange={(changedFields, allFields) => {
    console.log("on fields change : ", changedFields, allFields);
  }}
  // only triggered on user actions
  onValuesChange={(changedValues, allValues) => {
    console.log("on values change : ", changedValues, allValues);
  }}
>
  <Form.Item
    name="input"
    rules={[{ required: true, message: "please fill" }]}
  >
    <Input />
  </Form.Item>
  <Button
    onClick={() => {
      form.setFieldValue("input", "TEST MESSAGE");
      // if you don't pass any field so all
      // available fields will be validated
      form.validateFields(["input"]);
    }}
  >
    click me
  </Button>
</Form>

The "problem" of this sollution is: onFieldsChange will be triggered more than one time wich is not so hard do handle.

Also here is a working codesandbox.

Hope this helps:)