CODEWITHSUNDEEP
reactjsantd
Florian Motteau
Florian Motteau

Reputation: 3724

Use form.getFieldValue to add logic between field without warning

I have a Ant Design 4.x.x Form element without multiple Form.Item. I need to implement some logic involving form items' values, for example disabling a field if another one's value equals something, or recalculate select options when a text input changes.

To do so, I create the form using Form.useForm() and use form.getFieldValue() in my functional component body and / or in the returned JSX, like so :

Edit antd reproduction template

It is working as I expect to, but at startup, getFieldValue usages throw annoying

index.js:1 Warning: Instance created by `useForm` is not connect to any Form element. Forget to pass `form` prop?

I found that Form functions cannot be used before rendering, and the problem also occured when displaying a form in a Modal like stated in the docs.

So I feel that I'm missing something on how to correctly add custom logic between fields, or doing some calculation involving fields values in component body.

What would be a correct approach to do this ?

Upvotes: 0

Views: 1744

Answers (1)

Faizy
Faizy

Reputation: 1

Try adding getContainer={false}, to your modal this will work for you.

Upvotes: 0

Related Questions