can we reset field on click of reset button for searchFormProps
can we reset field on click of reset button for searchFormProps
onSearch: (params) => {
debugger
const filters: CrudFilters = [];
const { firstName, active }: any = params;
filters.push({
field: "firstName",
operator: "eq",
value: firstName,
});
filters.push({
field: "status",
operator: "eq",
value: active,
});
return filters;
},
<Button
onClick={() => {
setFilters([], "replace");
form.resetFields();
}}
type="primary"
size="large"
block
>
Reset
</Button>
![No description](https://cdn.answeroverflow.com/1138008622308282458/Screenshot_from_2023-08-07_12-48-47.png)
11 Replies
Hi @jash.s. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Yes, you can reset the fields of a form in refine by using the
resetFields
method from the form instance. In your case, you are correctly using form.resetFields()
to reset the fields when the "Reset" button is clicked.
Here is the relevant part of your code:
In this code, setFilters([], "replace")
is used to clear the filters and form.resetFields()
is used to reset the form fields.
Please note that the form
instance should be the one provided by searchFormProps
from useTable
or useSimpleList
hooks. If you are using a different form instance, make sure it is correctly initialized and connected to your form component.
For more information, you can refer to the refine documentation (https://refine.dev/docs).
----------------------
Note: you can ask me a follow up question by @ mentioning me again
:speech_balloon:
----------------------<@1129363768661516329> kapa.ai is still learning and improving, please let us know how it did by reacting below
flat-fuchsia•14mo ago
Please note that the form instance should be the one provided by searchFormProps from useTable or useSimpleList hooks. If you are using a different form instance, make sure it is correctly initialized and connected to your form component.
Give an example for this
@kapa.ai Please note that the form instance should be the one provided by searchFormProps from useTable or useSimpleList hooks. If you are using a different form instance, make sure it is correctly initialized and connected to your form component.
Give an example for this
Let me check the knowledge base for you. One moment! :books:
----------------------
Sure, here is an example of how you can use the
searchFormProps
from the useSimpleList
hook in refine. This example shows how to create a filter form for your list and how to reset the form fields:
In this example, searchFormProps.form?.resetFields
is used to reset the form fields when the "Reset" button is clicked. The searchFormProps
is provided by the useSimpleList
hook and it includes the form
instance of Ant Design Form.
For more information, you can refer to the refine documentation (https://refine.dev/docs/api-reference/antd/hooks/list/useSimpleList).
----------------------
Note: you can ask me a follow up question by @ mentioning me again
:speech_balloon:
----------------------<@1129363768661516329> kapa.ai is still learning and improving, please let us know how it did by reacting below
flat-fuchsia•14mo ago
const { tableProps, sorter, searchFormProps, filters, setFilters } = useTable<UserData>({ })
<Form {...searchFormProps} layout="vertical">
</Button>
<Button
onClick={() => {
setFilters([], "replace")
searchFormProps.form?.resetFields
}}
type="primary"
size="large"
block
>
Reset
</Button>
not resettting the feilds , kindly check and fix if any issues
@kapa.ai const { tableProps, sorter, searchFormProps, filters, setFilters } = useTable<UserData>({ })
<Form {...searchFormProps} layout="vertical">
</Button>
<Button
onClick={() => {
setFilters([], "replace")
searchFormProps.form?.resetFields
}}
type="primary"
size="large"
block
>
Reset
</Button>
not resettting the feilds , kindly check and fix if any issues
Let me check the knowledge base for you. One moment! :books:
----------------------
It seems like you're missing the function call parentheses
()
at the end of searchFormProps.form?.resetFields
. This is required to actually call the function and reset the fields. Here's the corrected code:
In this corrected code, searchFormProps.form?.resetFields()
is used to reset the form fields when the "Reset" button is clicked.
For more information, you can refer to the refine documentation (https://refine.dev/docs).
----------------------
Note: you can ask me a follow up question by @ mentioning me again
:speech_balloon:
----------------------<@1129363768661516329> kapa.ai is still learning and improving, please let us know how it did by reacting below
flat-fuchsia•14mo ago
Thanks @kapa.ai this worked for me
Let me check the knowledge base for you. One moment! :books:
----------------------
You're welcome! I'm glad to hear that the solution worked for you. If you have any more questions or need further assistance with refine, feel free to ask. Happy coding!
----------------------
Note: you can ask me a follow up question by @ mentioning me again
:speech_balloon:
----------------------<@1129363768661516329> kapa.ai is still learning and improving, please let us know how it did by reacting below