like-gold•6mo ago

useForm graphql variable number

I'm tring to pass a float number to a create form, forced the type to be a number in the onFinish function in the useForm hook but i still get a graphql error that the number was passed as a string, which is true when i look at the request payload. How can i pass a numeric value to the useForm create?

6 Replies

kapa.ai•6mo ago

Hi @Emi. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In the useForm hook, you can modify the form data before it is sent to the API using the onFinish function. This function accepts an object with properties of each record on the API, to which you can pass custom values. If you want to pass a numeric value, you can convert the string to a number using JavaScript's parseFloat or parseInt function, depending on whether you want a floating point number or an integer. Here is an example where we modify the form data before submit:

import { useForm } from "@refinedev/react-hook-form";  
import React from "react";  
import { FieldValues } from "react-hook-form";  
  
export const UserCreate: React.FC = () => {  
 const {  
 refineCore: { onFinish },  
 register,  
 handleSubmit,  
 } = useForm();  
  
 const onFinishHandler = (data: FieldValues) => {  
 onFinish({  
 numericValue: parseFloat(data.stringValue),
 });  
 };  
  
 return (  
 <form onSubmit={handleSubmit(onFinishHandler)}>  
 <label>Value: </label>  
 <input {...register("stringValue")} />  
 <br />  
  
 <button type="submit">Submit</button>  
 </form>  
 );  
};

import { useForm } from "@refinedev/react-hook-form";  
import React from "react";  
import { FieldValues } from "react-hook-form";  
  
export const UserCreate: React.FC = () => {  
 const {  
 refineCore: { onFinish },  
 register,  
 handleSubmit,  
 } = useForm();  
  
 const onFinishHandler = (data: FieldValues) => {  
 onFinish({  
 numericValue: parseFloat(data.stringValue),
 });  
 };  
  
 return (  
 <form onSubmit={handleSubmit(onFinishHandler)}>  
 <label>Value: </label>  
 <input {...register("stringValue")} />  
 <br />  
  
 <button type="submit">Submit</button>  
 </form>  
 );  
};

In this example, stringValue is the value you get from the form, and numericValue is the value you want to send to the API. The parseFloat function converts the string to a floating point number. Please replace stringValue and numericValue with the actual names you are using in your form and API. For more information, you can refer to the refine documentation (https://refine.dev/docs/packages/react-hook-form/use-form#how-can-i-change-the-form-data-before-submitting-it-to-the-api). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

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

like-gold•6mo ago

@kapa.ai Forgot to mention i am using a Create and Form element form Antd. What would be the correct syntax?

kapa.ai•6mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- In the context of Ant Design's Form and Create components, you can use the onFinish prop of the Form component to handle the form submission and convert the string to a number. Here's an example:

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

interface IProduct {  
 id: string;  
 name: string;  
 price: number;  
 description: string;  
}  

export const ProductCreate = () => {  
 const { formProps, saveButtonProps } = useForm<IProduct>();  

 const onFinishHandler = (data: IProduct) => {  
  data.price = parseFloat(data.price);
  formProps.onFinish(data);
 };  

 return (  
 <Form {...formProps} onFinish={onFinishHandler} layout="vertical">  
 <Form.Item  
 label="Name"  
 name="name"  
 rules={[{ required: true }]}  
 >  
 <Input />  
 </Form.Item>  
 <Form.Item  
 label="Price"  
 name="price"  
 rules={[{ required: true }]}  
 >  
 <Input />  
 </Form.Item>  
 <Form.Item  
 label="Description"  
 name="description"  
 rules={[{ required: true }]}  
 >  
 <Input.TextArea rows={4} />  
 </Form.Item>  
 <SaveButton {...saveButtonProps}>  
 </Form>  
 )  
}

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

interface IProduct {  
 id: string;  
 name: string;  
 price: number;  
 description: string;  
}  

export const ProductCreate = () => {  
 const { formProps, saveButtonProps } = useForm<IProduct>();  

 const onFinishHandler = (data: IProduct) => {  
  data.price = parseFloat(data.price);
  formProps.onFinish(data);
 };  

 return (  
 <Form {...formProps} onFinish={onFinishHandler} layout="vertical">  
 <Form.Item  
 label="Name"  
 name="name"  
 rules={[{ required: true }]}  
 >  
 <Input />  
 </Form.Item>  
 <Form.Item  
 label="Price"  
 name="price"  
 rules={[{ required: true }]}  
 >  
 <Input />  
 </Form.Item>  
 <Form.Item  
 label="Description"  
 name="description"  
 rules={[{ required: true }]}  
 >  
 <Input.TextArea rows={4} />  
 </Form.Item>  
 <SaveButton {...saveButtonProps}>  
 </Form>  
 )  
}

In this example, onFinishHandler is a function that takes the form data, converts the price from a string to a number using parseFloat, and then calls the original onFinish function from formProps. Please replace IProduct, name, price, and description with the actual names you are using in your form and API. For more information, you can refer to the refine documentation (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

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

like-gold•6mo ago

This works great 🫡