rare-sapphire•10mo ago

useForm

Hi, is there any way i can see the form fields value that has been filled before submitting? i mean if i can like do console.log(data) an put it in a button to trigger it just to see if the form actually catch each input value?

16 Replies

kapa.ai•10mo ago

Hi @Griyan. 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 see the form fields value that has been filled before submitting. You can use the handleSubmit method from the useForm hook to create a function that logs the form data to the console. Here's an example:

const {  
 control,  
 handleSubmit,  
 watch,  
 formState: { errors },  
} = useForm <IFormValue>  
{  
 mode: "onChange",  
 defaultValues,  
 resolver: yupResolver(schema),  
};  
  
const handleSubmission = (data: IFormValue) => console.log(data);

const {  
 control,  
 handleSubmit,  
 watch,  
 formState: { errors },  
} = useForm <IFormValue>  
{  
 mode: "onChange",  
 defaultValues,  
 resolver: yupResolver(schema),  
};  
  
const handleSubmission = (data: IFormValue) => console.log(data);

Then, you can add an onSubmit event handler to the form and pass the handleSubmit method and handleSubmission function to it:

<form  
 onSubmit={handleSubmit(handleSubmission)}  
 style={{ display: "flex", flexDirection: "column" }}  
>  
 ...  
</form>

<form  
 onSubmit={handleSubmit(handleSubmission)}  
 style={{ display: "flex", flexDirection: "column" }}  
>  
 ...  
</form>

Now, when you fill in the fields and submit the form, you should get a logged object of the form’s data in your console. For more information, you can refer to the React Hook Form Validation with Complete Examples (https://refine.dev/blog/react-hook-form-validation-examples/) blog post. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•10mo ago

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

rare-sapphire•10mo ago

im using useForm from this package @refinedev/antd @kapa.ai

kapa.ai•10mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- In the @refinedev/antd package, the useForm hook doesn't directly provide a way to log the form data before submission. However, you can use the onValuesChange prop of the Ant Design Form component to log the form data whenever a field value changes. Here's an example:

import { Edit, useForm } from "@refinedev/antd";  
import { Form, Input, Select } from "antd";  
  
export const PostEdit: React.FC = () => {  
 const { formProps, saveButtonProps } = useForm<IPost>();  
  
 return (  
 <Edit saveButtonProps={saveButtonProps}>  
 <Form {...formProps} layout="vertical" onValuesChange={(changedValues, allValues) => console.log(allValues)}>  
 <Form.Item label="Title" name="title">  
 <Input />  
 </Form.Item>  
 <Form.Item label="Status" name="status">  
 <Select  
 options={[  
 {  
 label: "Published",  
 value: "published",  
 },  
 {  
 label: "Draft",  
 value: "draft",  
 },  
 {  
 label: "Rejected",  
 value: "rejected",  
 },  
 ]}  
 />  
 </Form.Item>  
 </Form>  
 </Edit>  
 );  
};  
  
interface IPost {  
 id: number;  
 title: string;  
 status: "published" | "draft" | "rejected";  
}

import { Edit, useForm } from "@refinedev/antd";  
import { Form, Input, Select } from "antd";  
  
export const PostEdit: React.FC = () => {  
 const { formProps, saveButtonProps } = useForm<IPost>();  
  
 return (  
 <Edit saveButtonProps={saveButtonProps}>  
 <Form {...formProps} layout="vertical" onValuesChange={(changedValues, allValues) => console.log(allValues)}>  
 <Form.Item label="Title" name="title">  
 <Input />  
 </Form.Item>  
 <Form.Item label="Status" name="status">  
 <Select  
 options={[  
 {  
 label: "Published",  
 value: "published",  
 },  
 {  
 label: "Draft",  
 value: "draft",  
 },  
 {  
 label: "Rejected",  
 value: "rejected",  
 },  
 ]}  
 />  
 </Form.Item>  
 </Form>  
 </Edit>  
 );  
};  
  
interface IPost {  
 id: number;  
 title: string;  
 status: "published" | "draft" | "rejected";  
}

In this example, the onValuesChange prop is used to log the form data whenever a field value changes. The allValues parameter contains all the current form data. For more information, you can refer to the useForm documentation (https://refine.dev/docs/api-reference/antd/hooks/form/useForm/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•10mo ago

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

rare-sapphire•10mo ago

how to get fields value if the data is inside an object of an object how to get fields value if the data is inside an object of an object @kapa.ai

kapa.ai•10mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- If the data is nested within an object of an object, you can access it using dot notation or bracket notation. For example, if you have a data object like this:

const data = {
  user: {
    name: "John Doe",
    address: {
      street: "123 Main St",
      city: "Springfield",
      country: "USA"
    }
  }
}

const data = {
  user: {
    name: "John Doe",
    address: {
      street: "123 Main St",
      city: "Springfield",
      country: "USA"
    }
  }
}

You can access the street field like this:

console.log(data.user.address.street); // Outputs: 123 Main St

console.log(data.user.address.street); // Outputs: 123 Main St

Or like this:

console.log(data["user"]["address"]["street"]); // Outputs: 123 Main St

console.log(data["user"]["address"]["street"]); // Outputs: 123 Main St

If you're dealing with form data, you can use the same approach to get the value of a specific field. For example, if you're using the onValuesChange prop of the Ant Design Form component to log the form data, you can get the value of a specific field like this:

<Form {...formProps} layout="vertical" onValuesChange={(changedValues, allValues) => console.log(allValues.user.address.street)}>

<Form {...formProps} layout="vertical" onValuesChange={(changedValues, allValues) => console.log(allValues.user.address.street)}>

This will log the value of the street field whenever it changes. For more information, you can refer to the JavaScript object documentation (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects) on MDN. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•10mo ago

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

rare-sapphire•10mo ago

can it be like getFieldsValue(user.address.street) can it be like getFieldsValue(user.address.street) @kapa.ai

kapa.ai•10mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- In Ant Design's Form, the getFieldsValue method can be used to get the values of all fields or specified fields. However, it doesn't support dot notation for nested fields. If you want to get the value of a nested field, you need to get the value of the parent field first, and then access the nested field from the returned object. Here's an example:

const { getFieldsValue } = formProps;
const userData = getFieldsValue(['user']);
console.log(userData.user.address.street);

const { getFieldsValue } = formProps;
const userData = getFieldsValue(['user']);
console.log(userData.user.address.street);

In this example, getFieldsValue(['user']) is used to get the value of the user field, which is an object that includes the address field. Then, userData.user.address.street is used to access the street field from the returned object. For more information, you can refer to the getFieldsValue documentation (https://ant.design/components/form/#FormInstance) on the Ant Design website. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•10mo ago

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

rare-sapphire•10mo ago

is there any way to validate for an input to be filled if the input before it is already filled first? @kapa.ai

kapa.ai•10mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, you can achieve this by using conditional validation with Yup, which is a JavaScript schema builder for value parsing and validation. In the validation schema, you can use the when method to add a condition to a field. The when method allows you to change the validation schema of a field based on the value of another field. Here's an example:

const schema = Yup.object().shape({
  field1: Yup.string()
    .required('This field is required'),
  field2: Yup.string().when(
    "field1",
    (field1: string, schema: Yup.StringSchema) => {
      return field1 ? schema.required('This field is required') : schema
    }
  ),
});

const schema = Yup.object().shape({
  field1: Yup.string()
    .required('This field is required'),
  field2: Yup.string().when(
    "field1",
    (field1: string, schema: Yup.StringSchema) => {
      return field1 ? schema.required('This field is required') : schema
    }
  ),
});

In this example, field2 is required only if field1 is filled. If field1 is not filled, field2 is not required. For more information, you can refer to the React Hook Form Validation with Complete Examples (https://refine.dev/blog/react-hook-form-validation-examples/) blog post. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•10mo ago

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

rare-sapphire•10mo ago

how to validates an input before getting filled? the input before it must have value first before it can be filled @kapa.ai

kapa.ai•10mo ago

Let me check the knowledge base for you. One moment! :books: @Griyan That's a great question, but unfortunately I am only capable of responding to a maximum of five questions per thread. Don't hesitate to create a new thread for any further questions you have though. I'm here to help!