rival-black•6mo ago

Antd design watch form input for value changes

ant design has a useWatch hook, this doesn't work in refine when using useForm, but I want to watch for changes, what can I do?

5 Replies

kapa.ai•6mo ago

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 watch for form input value changes in Ant Design when using useForm in refine, you can utilize the Form.useWatch hook from Ant Design. This approach has been mentioned by a user in a discussion as a solution to a similar problem. Here is an example of how you can use Form.useWatch within a refine application:

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

const MyFormComponent = () => {
    const { formProps } = useForm();
    const [form] = Form.useForm();

    // Watch for changes in the "name" field
    const nameValue = Form.useWatch("name", form);

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

    return (
        <Form {...formProps} form={form} layout="vertical">
            <Form.Item
                label="Name"
                name="name"
                rules={[{ required: true }]}
            >
                <Input />
            </Form.Item>
            {/* Add other form items as needed */}
        </Form>
    );
};

export default MyFormComponent;

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

const MyFormComponent = () => {
    const { formProps } = useForm();
    const [form] = Form.useForm();

    // Watch for changes in the "name" field
    const nameValue = Form.useWatch("name", form);

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

    return (
        <Form {...formProps} form={form} layout="vertical">
            <Form.Item
                label="Name"
                name="name"
                rules={[{ required: true }]}
            >
                <Input />
            </Form.Item>
            {/* Add other form items as needed */}
        </Form>
    );
};

export default MyFormComponent;

In this example: - We use Form.useWatch to monitor changes to the "name" field. - The useEffect hook logs the new value of the "name" field whenever it changes. For more information on Form.useWatch, you can refer to the Ant Design Form documentation (https://ant.design/components/form/). If you need further details on how to integrate forms with refine, you can check the refine documentation on useForm (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-form/). This approach should help you watch for form input value changes effectively within a refine application using Ant Design. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

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

rival-blackOP•6mo ago

@kapa.ai will this still save depending on the wrapping component?

kapa.ai•6mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, the form will still save depending on the wrapping component. The Form.useWatch hook is used to monitor changes in the form fields, but it does not interfere with the form submission process. The form submission will still be handled by the useForm hook from refine. Here is an example that demonstrates how to integrate Form.useWatch with the form submission process in a refine application:

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

const MyFormComponent = () => {
    const { formProps, saveButtonProps } = useForm();
    const [form] = Form.useForm();

    // Watch for changes in the "name" field
    const nameValue = Form.useWatch("name", form);

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

    return (
        <Form {...formProps} form={form} layout="vertical">
            <Form.Item
                label="Name"
                name="name"
                rules={[{ required: true }]}
            >
                <Input />
            </Form.Item>
            {/* Add other form items as needed */}
            <Form.Item>
                <Button type="primary" {...saveButtonProps}>
                    Save
                </Button>
            </Form.Item>
        </Form>
    );
};

export default MyFormComponent;

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

const MyFormComponent = () => {
    const { formProps, saveButtonProps } = useForm();
    const [form] = Form.useForm();

    // Watch for changes in the "name" field
    const nameValue = Form.useWatch("name", form);

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

    return (
        <Form {...formProps} form={form} layout="vertical">
            <Form.Item
                label="Name"
                name="name"
                rules={[{ required: true }]}
            >
                <Input />
            </Form.Item>
            {/* Add other form items as needed */}
            <Form.Item>
                <Button type="primary" {...saveButtonProps}>
                    Save
                </Button>
            </Form.Item>
        </Form>
    );
};

export default MyFormComponent;

In this example: - The Form.useWatch hook is used to monitor changes to the "name" field. - The useEffect hook logs the new value of the "name" field whenever it changes. - The form submission is handled by the useForm hook from refine, and the save button is configured with saveButtonProps to trigger the form submission. This ensures that the form will still save correctly, regardless of the wrapping component, while also allowing you to watch for changes in specific form fields. For more details on how to use useForm in refine, you can refer to the refine documentation on useForm (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-form/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

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

Antd design watch form input for value changes

Did you find this page helpful?