listen to form values for changes

How can I listen to form values being changed in antd

8 Replies

Hi @BlackBearFTW. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To listen to form values being changed in Ant Design (antd) within a refine application, you can use the Form.useWatch hook from antd. This hook allows you to monitor changes in form field values elegantly. Here is a brief example of how you can use Form.useWatch to listen to form value changes:

import React from "react";
import { Form, Input } from "antd";

const MyForm = () => {
  const [form] = Form.useForm();
  const name = Form.useWatch("name", form);

  React.useEffect(() => {
    console.log("Name changed:", name);
  }, [name]);

  return (
    <Form form={form} layout="vertical">
      <Form.Item label="Name" name="name">
        <Input />
      </Form.Item>
      <Form.Item label="Surname" name="surname">
        <Input />
      </Form.Item>
    </Form>
  );
};

export default MyForm;

import React from "react";
import { Form, Input } from "antd";

const MyForm = () => {
  const [form] = Form.useForm();
  const name = Form.useWatch("name", form);

  React.useEffect(() => {
    console.log("Name changed:", name);
  }, [name]);

  return (
    <Form form={form} layout="vertical">
      <Form.Item label="Name" name="name">
        <Input />
      </Form.Item>
      <Form.Item label="Surname" name="surname">
        <Input />
      </Form.Item>
    </Form>
  );
};

export default MyForm;

In this example: - We create a form instance using Form.useForm(). - We use Form.useWatch to watch the "name" field. - We use a useEffect hook to log changes to the "name" field whenever it changes. For more information, you can refer to the discussion where Form.useWatch was mentioned as a solution: GitHub Discussion (https://github.com/refinedev/refine/discussions/5848). Additionally, you can manage form state and actions using formProps from the useForm hook in refine, which includes properties like onValuesChange to handle changes in form values. For more details, you can refer to the refine documentation: - useForm Documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-form/#return-values) - useDrawerForm Documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-drawer-form/#formprops) - useModalForm Documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-modal-form/#formprops) These resources provide comprehensive information on managing form state and handling value changes in refine applications using Ant Design. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

multiple-amethyst•2mo ago

@kapa.ai this needs to work in the edit page

kapa.ai•2mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To listen to form values being changed on an edit page in a refine application using Ant Design, you can utilize the Form.useWatch hook. This hook allows you to monitor changes in form field values effectively. Here is an example of how you can implement this in an edit page:

import React from "react";
import { Edit, useForm } from "@refinedev/antd";
import { Form, Input } from "antd";

export const ProductEdit: React.FC = () => {
    const { formProps, saveButtonProps, queryResult } = useForm({
        resource: "products",
        id: 1,
        action: "edit",
    });

    const productData = queryResult?.data?.data;
    const [form] = Form.useForm();
    const name = Form.useWatch("name", form);

    React.useEffect(() => {
        console.log("Name changed:", name);
    }, [name]);

    return (
        <Edit saveButtonProps={saveButtonProps}>
            <Form {...formProps} form={form} layout="vertical">
                <Form.Item
                    label="Name"
                    name="name"
                    initialValue={productData?.name}
                    rules={[{ required: true, message: "Name is required" }]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    label="Category"
                    name="category"
                    initialValue={productData?.category?.id}
                    rules={[{ required: true, message: "Category is required" }]}
                >
                    <Input />
                </Form.Item>
                {/* Add other form items as needed */}
            </Form>
        </Edit>
    );
};

import React from "react";
import { Edit, useForm } from "@refinedev/antd";
import { Form, Input } from "antd";

export const ProductEdit: React.FC = () => {
    const { formProps, saveButtonProps, queryResult } = useForm({
        resource: "products",
        id: 1,
        action: "edit",
    });

    const productData = queryResult?.data?.data;
    const [form] = Form.useForm();
    const name = Form.useWatch("name", form);

    React.useEffect(() => {
        console.log("Name changed:", name);
    }, [name]);

    return (
        <Edit saveButtonProps={saveButtonProps}>
            <Form {...formProps} form={form} layout="vertical">
                <Form.Item
                    label="Name"
                    name="name"
                    initialValue={productData?.name}
                    rules={[{ required: true, message: "Name is required" }]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    label="Category"
                    name="category"
                    initialValue={productData?.category?.id}
                    rules={[{ required: true, message: "Category is required" }]}
                >
                    <Input />
                </Form.Item>
                {/* Add other form items as needed */}
            </Form>
        </Edit>
    );
};

In this example: - We use the useForm hook from refine to manage the form state and actions. - We create a form instance using Form.useForm(). - We use Form.useWatch to watch the "name" field. - We use a useEffect hook to log changes to the "name" field whenever it changes. This setup ensures that you can listen to changes in form values on the edit page. For more information, you can refer to the refine documentation: - useForm Documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-form/#return-values) These resources provide comprehensive information on managing form state and handling value changes in refine applications using Ant Design. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

multiple-amethyst•2mo ago

@kapa.ai do that for this code: export const TeamOverview = () => { const {formProps, saveButtonProps, formLoading} = useForm({}); const [form] = Form.useForm(); const t = useTranslate(); const exampleUrl = Form.useWatch("baseUrl", form); return ( <Edit headerButtons={<></>} title={t("team_overview.team_overview")} saveButtonProps={saveButtonProps} isLoading={formLoading}> <Form form={form} {...formProps} layout="vertical">
<Row gutter={8}> <Col span={12}> <Form.Item label={"Website basis-URL"} name={"baseUrl"} rules={[ { required: true, }, ]} normalize={(value, prevValue, prevValues) => { return "https://" + value }} > <Input placeholder={"voorbeeld.nl"} addonBefore={"https://"}/> Voorbeeld URL: </Form.Item> </Col> <Col span={12}> <Form.Item label={"Aanbod pagina pad"} name={"listingsPath"} rules={[ { required: true, }, ]} > <Input addonBefore={"/"} placeholder={"aanbod"}/> </Form.Item> </Col> </Row> </Form> </Edit> ); };

kapa.ai•2mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To listen to form values being changed on the TeamOverview edit page, you can use the Form.useWatch hook from Ant Design. This hook allows you to monitor changes in form field values effectively. Here is how you can modify your TeamOverview component to listen to changes in the baseUrl field:

import React, { useEffect } from "react";
import { Edit, useForm } from "@refinedev/antd";
import { Form, Input, Row, Col } from "antd";
import { useTranslate } from "@refinedev/core";

export const TeamOverview = () => {
    const { formProps, saveButtonProps, formLoading } = useForm({});
    const [form] = Form.useForm();
    const t = useTranslate();

    const exampleUrl = Form.useWatch("baseUrl", form);

    useEffect(() => {
        console.log("Base URL changed:", exampleUrl);
    }, [exampleUrl]);
return (
        <Edit headerButtons={<></>} title={t("team_overview.team_overview")} saveButtonProps={saveButtonProps} isLoading={formLoading}>
            <Form form={form} {...formProps} layout="vertical">
                <Row gutter={8}>
                    <Col span={12}>
                        <Form.Item
                            label={"Website basis-URL"}
                            name={"baseUrl"}
                            rules={[
                                {
                                    required: true,
                                },
                            ]}
                            normalize={(value, prevValue, prevValues) => {
                                return "<https://"> + value;
                            }}
                        >
                            <Input placeholder={"voorbeeld.nl"} addonBefore={"<https://"}/>>
                            Voorbeeld URL:
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item
                            label={"Aanbod pagina pad"}
                            name={"listingsPath"}
                            rules={[
                                {
                                    required: true,
                                },
                            ]}
                        >
                            <Input addonBefore={"/"} placeholder={"aanbod"}/>
                        </Form.Item>
                    </Col>
                </Row>
            </Form>
        </Edit>
    );
};

import React, { useEffect } from "react";
import { Edit, useForm } from "@refinedev/antd";
import { Form, Input, Row, Col } from "antd";
import { useTranslate } from "@refinedev/core";

export const TeamOverview = () => {
    const { formProps, saveButtonProps, formLoading } = useForm({});
    const [form] = Form.useForm();
    const t = useTranslate();

    const exampleUrl = Form.useWatch("baseUrl", form);

    useEffect(() => {
        console.log("Base URL changed:", exampleUrl);
    }, [exampleUrl]);
return (
        <Edit headerButtons={<></>} title={t("team_overview.team_overview")} saveButtonProps={saveButtonProps} isLoading={formLoading}>
            <Form form={form} {...formProps} layout="vertical">
                <Row gutter={8}>
                    <Col span={12}>
                        <Form.Item
                            label={"Website basis-URL"}
                            name={"baseUrl"}
                            rules={[
                                {
                                    required: true,
                                },
                            ]}
                            normalize={(value, prevValue, prevValues) => {
                                return "<https://"> + value;
                            }}
                        >
                            <Input placeholder={"voorbeeld.nl"} addonBefore={"<https://"}/>>
                            Voorbeeld URL:
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item
                            label={"Aanbod pagina pad"}
                            name={"listingsPath"}
                            rules={[
                                {
                                    required: true,
                                },
                            ]}
                        >
                            <Input addonBefore={"/"} placeholder={"aanbod"}/>
                        </Form.Item>
                    </Col>
                </Row>
            </Form>
        </Edit>
    );
};

In this example: - We use the useForm hook from refine to manage the form state and actions. - We create a form instance using Form.useForm(). - We use Form.useWatch to watch the baseUrl field. - We use a useEffect hook to log changes to the baseUrl field whenever it changes. This setup ensures that you can listen to changes in form values on the edit page. For more information, you can refer to the refine documentation: - useForm Documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-form/#return-values) These resources provide comprehensive information on managing form state and handling value changes in refine applications using Ant Design. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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