How to fix it Cannot use `setFieldsValue`

Question

How to fix it

Warning: Cannot use setFieldsValue until you use getFieldDecorator or getFieldProps to register it.

Exposed

Answer 1

I faced the same issue with react hooks. Following solution works for me.

props.form.getFieldDecorator('Amount', { initialValue: 'My Value' })

As I feel the reason is initialValue is not going to change after the first render, just like defaultValue.

Bobsled

What if my input fields are in a collapsed menu (not rendered unless I expand it) How do I set their values dynamically with setFieldsValue – Interplead

Answer 2

From the doc https://ant.design/components/form/#this.props.form.getFieldDecorator(id,-options):

After wrapped by getFieldDecorator, value(or other property defined by valuePropName) onChange(or other property defined by trigger) props will be added to form controls，the flow of form data will be handled by Form [...]

So, without the registration of the form field with getFieldDecorator, you cannot use setFieldsValue.

You are setting a value to a field that doesn't exist inside the form. First, you must register the field into the form with getFieldDecorator and then you can use the setter.

Maybe the getter-style method name it's a bit misleading.

Brother

Answer 3

Using [email protected]

If you want to register a field, but don't want to show it to the user, you should add the field to form like this:

<Form.Item name={"updated_at"} noStyle />

Then you can set the form value when another value change, like:

    <Form.Item label="Name" name={'user_name'}>
      <Input
        onChange={(e) => {
          form.setFieldsValue({
            updated_at: dayjs().format('YYYY-MM-DD'),
          });
        }}
      />
    </Form.Item>

Strathspey

You saved me! I spent hours trying to figure out why the field is not included in the values on onFinish. – Polyphagia

@Polyphagia Glad to hear that. I generally post answers to questions I search answers for, right after I find a solution myself. This is one of them. – Atrophied

Answer 4

Use setFieldsValue after componentDidMount,or use initialValue option.

Voltmer

Answer 5

Please use getFieldDecorator before setFieldsValue

Truckle

Answer 6

Well, because you are not using the hook of const [form] = Form.useForm()

after that in From Component you can assign form in

<Form
   form={form}
>
.....
</Form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

in this case it will be fixed, I hope you find it useful.

Phares

Answer 7

In AntD 4.x, there is no getFieldDecorator method it seems. This is how I used the form hook to also include fields that I didn't want to add a Form.Item for.

    const [editCollectionForm] = Form.useForm<Collection>();

    useEffect(() => {
        if (activeCollection) {
            editCollectionForm.setFieldsValue(activeCollection);

            const printForm = async () => {
                const isValid = await editCollectionForm.validateFields({ validateOnly: true });
                if (isValid) {
                    // Passing true into getFieldsValue was the trick to get all fields, registered or not.
                    const allFields = editCollectionForm.getFieldsValue(true);
                    console.log("🚀 ~ allFields:", allFields);
                }
            };
            printForm();
        }
    }, [activeCollection]);

Tetrabranchiate