secure-lavender•2y ago

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>

11 Replies

kapa.ai•2y ago

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:

<Button
  onClick={() => {
    setFilters([], "replace");
    form.resetFields();
  }}
  type="primary"
  size="large"
  block
>
  Reset
</Button>

<Button
  onClick={() => {
    setFilters([], "replace");
    form.resetFields();
  }}
  type="primary"
  size="large"
  block
>
  Reset
</Button>

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: ----------------------

kapa.ai•2y ago

<@1129363768661516329> kapa.ai is still learning and improving, please let us know how it did by reacting below

secure-lavenderOP•2y 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

kapa.ai•2y ago

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:

import { Form, Input, Button } from "antd";
import { useSimpleList } from "@pankod/refine";

// ...

const { searchFormProps, listProps } = useSimpleList({
  onSearch: (values) => {
    return [
      {
        field: "name",
        operator: "contains",
        value: values.name,
      },
      {
        field: "description",
        operator: "contains",
        value: values.description,
      },
    ];
  },
});

// ...

return (
  <div>
    <Form {...searchFormProps} layout="inline">
      <Form.Item name="name">
        <Input placeholder="Search by name" />
      </Form.Item>
      <Form.Item name="description">
        <Input placeholder="Search by description" />
      </Form.Item>
      <Button type="primary" onClick={searchFormProps.form?.resetFields}>
        Reset
      </Button>
    </Form>
    <AntdList {...listProps} renderItem={renderItem} />
  </div>
);

import { Form, Input, Button } from "antd";
import { useSimpleList } from "@pankod/refine";

// ...

const { searchFormProps, listProps } = useSimpleList({
  onSearch: (values) => {
    return [
      {
        field: "name",
        operator: "contains",
        value: values.name,
      },
      {
        field: "description",
        operator: "contains",
        value: values.description,
      },
    ];
  },
});

// ...

return (
  <div>
    <Form {...searchFormProps} layout="inline">
      <Form.Item name="name">
        <Input placeholder="Search by name" />
      </Form.Item>
      <Form.Item name="description">
        <Input placeholder="Search by description" />
      </Form.Item>
      <Button type="primary" onClick={searchFormProps.form?.resetFields}>
        Reset
      </Button>
    </Form>
    <AntdList {...listProps} renderItem={renderItem} />
  </div>
);

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: ----------------------

kapa.ai•2y ago

<@1129363768661516329> kapa.ai is still learning and improving, please let us know how it did by reacting below

secure-lavenderOP•2y 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

kapa.ai•2y ago

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:

<Button
  onClick={() => {
    setFilters([], "replace");
    searchFormProps.form?.resetFields();
  }}
  type="primary"
  size="large"
  block
>
  Reset
</Button>

<Button
  onClick={() => {
    setFilters([], "replace");
    searchFormProps.form?.resetFields();
  }}
  type="primary"
  size="large"
  block
>
  Reset
</Button>

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: ----------------------

kapa.ai•2y ago

<@1129363768661516329> kapa.ai is still learning and improving, please let us know how it did by reacting below

secure-lavenderOP•2y ago

Thanks @kapa.ai this worked for me

kapa.ai•2y ago

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: ----------------------

kapa.ai•2y ago

<@1129363768661516329> kapa.ai is still learning and improving, please let us know how it did by reacting below

can we reset field on click of reset button for searchFormProps

Did you find this page helpful?