Dynamic form field

Can u show an example where i can add multiple fields dynamically??

11 Replies

Hi @dreamer9067. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Sure, you can add multiple fields dynamically in a form using the useFieldArray hook from React Hook Form. Here's an example from the Dynamic Forms with React Hook Form (https://refine.dev/blog/dynamic-forms-in-react-hook-form) blog post: First, import the necessary components and hooks:

import { Create, Box, TextField, Button } from "@refinedev/mui";  
import {  
 useForm,  
 Controller,  
 useFieldArray,  
} from "@refinedev/react-hook-form";

import { Create, Box, TextField, Button } from "@refinedev/mui";  
import {  
 useForm,  
 Controller,  
 useFieldArray,  
} from "@refinedev/react-hook-form";

Next, create a button component with an onClick event handler and call the append() method inside it:

{  
 fields.map(({ id }, index) => {  
 return (  
 <Box key={id} sx={{ display: "inline-flex" }}>  
 <Controller  
 control={control}  
 name={`skills[${index}].skills`}  
 render={({ field }) => (  
 <TextField  
 {...field}  
 error={!!errors?.skills}  
 helperText={errors.skills && `${errors.skills.message}`}  
 margin="normal"  
 required  
 fullWidth  
 id="skills"  
 label={`Skill - ${index + 1}`}  
 />  
 )}  
 />  
 </Box>  
 );  
 });  
}  
<Button  
 variant="outlined"  
 fullWidth  
 onClick={() => {  
 append({ skills: "Javascript" });  
 }}  
>  
 Add a skill  
</Button>;

{  
 fields.map(({ id }, index) => {  
 return (  
 <Box key={id} sx={{ display: "inline-flex" }}>  
 <Controller  
 control={control}  
 name={`skills[${index}].skills`}  
 render={({ field }) => (  
 <TextField  
 {...field}  
 error={!!errors?.skills}  
 helperText={errors.skills && `${errors.skills.message}`}  
 margin="normal"  
 required  
 fullWidth  
 id="skills"  
 label={`Skill - ${index + 1}`}  
 />  
 )}  
 />  
 </Box>  
 );  
 });  
}  
<Button  
 variant="outlined"  
 fullWidth  
 onClick={() => {  
 append({ skills: "Javascript" });  
 }}  
>  
 Add a skill  
</Button>;

In this example, the append() method is used to add a new field to the form. The object argument being passed to the append method will serve as the default value of each dynamic field. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

foreign-sapphireOP•2y ago

@kapa.ai i need an example for ant forms

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Sure, here's an example of creating a dynamic form using Ant Design in a React CRUD app with Refine. This example is taken from the Refine blog (https://refine.dev/blog/react-crud-app-with-dynamic-form-ant-design). First, you need to import the necessary components and hooks from @refinedev/antd:

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

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

Then, you can create a form using these components and hooks:

import React from "react";  
import {  
 Create,  
 Button,  
 Form,  
 Input,  
 Space,  
 Icons,  
 useForm,  
} from "@refinedev/antd";  
  
interface IFormValue {  
 name: string;  
 email: string;  
 skills: string;  
}  
  
export default function PostCreate(Props: any) {  
 const { formProps, saveButtonProps } = useForm<IFormValue>();  
  
 return (  
 <Create saveButtonProps={saveButtonProps}>  
 <Form size={"large"} {...formProps}>  
 <Input placeholder="e.g John" />  
 <Input placeholder="e.g john@email.com" />  
 </Form>  
 </Create>  
 );  
}

import React from "react";  
import {  
 Create,  
 Button,  
 Form,  
 Input,  
 Space,  
 Icons,  
 useForm,  
} from "@refinedev/antd";  
  
interface IFormValue {  
 name: string;  
 email: string;  
 skills: string;  
}  
  
export default function PostCreate(Props: any) {  
 const { formProps, saveButtonProps } = useForm<IFormValue>();  
  
 return (  
 <Create saveButtonProps={saveButtonProps}>  
 <Form size={"large"} {...formProps}>  
 <Input placeholder="e.g John" />  
 <Input placeholder="e.g john@email.com" />  
 </Form>  
 </Create>  
 );  
}

In this example, useForm is a Refine hook for handling form data. It offers adapters that let Refine integrate with Ant Design's <Form> component. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

foreign-sapphireOP•2y ago

@kapa.ai can u show me an example of dyanmic form in ant??

kapa.ai•2y ago

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

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

Then, you can create a form using these components and hooks:

import React from "react";  
import {  
 Create,  
 Button,  
 Form,  
 Input,  
 Space,  
 Icons,  
 useForm,  
} from "@refinedev/antd";  
  
interface IFormValue {  
 name: string;  
 email: string;  
 skills: string;  
}  
  
export default function PostCreate(Props: any) {  
 const { formProps, saveButtonProps } = useForm<IFormValue>();  
  
 return (  
 <Create saveButtonProps={saveButtonProps}>  
 <Form size={"large"} {...formProps}>  
 <Input placeholder="e.g John" />  
 <Input placeholder="e.g john@email.com" />  
 </Form>  
 </Create>  
 );  
}

import React from "react";  
import {  
 Create,  
 Button,  
 Form,  
 Input,  
 Space,  
 Icons,  
 useForm,  
} from "@refinedev/antd";  
  
interface IFormValue {  
 name: string;  
 email: string;  
 skills: string;  
}  
  
export default function PostCreate(Props: any) {  
 const { formProps, saveButtonProps } = useForm<IFormValue>();  
  
 return (  
 <Create saveButtonProps={saveButtonProps}>  
 <Form size={"large"} {...formProps}>  
 <Input placeholder="e.g John" />  
 <Input placeholder="e.g john@email.com" />  
 </Form>  
 </Create>  
 );  
}

kapa.ai•2y ago

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

foreign-sapphireOP•2y ago

@kapa.ai this is helpful: https://refine.dev/blog/react-crud-app-with-dynamic-form-ant-design/#validation

How to Create Dynamic Forms in React CRUD app with Ant Design | refine

Easy way to creating dynamic forms in React CRUD apps with Ant Design

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- I'm glad you found the link helpful! The Validation section (https://refine.dev/blog/react-crud-app-with-dynamic-form-ant-design/#validation) in the blog post provides an example of how to add validation to your dynamic form in a React CRUD app with Ant Design and Refine. Here's the code snippet from the blog post:

<Form.Item  
 name={"first Name"}  
 label="Full Name"  
 style={{ maxWidth: "600px" }}  
 rules={[  
 { required: true, message: "please enter your name" },  
 { whitespace: true },  
 {  
 min: 3,  
 message: "field must be at least 3 characters",  
 },  
 ]}  
 hasFeedback  
>  
 <Input placeholder="e.g John" />  
</Form.Item>

<Form.Item  
 name={"first Name"}  
 label="Full Name"  
 style={{ maxWidth: "600px" }}  
 rules={[  
 { required: true, message: "please enter your name" },  
 { whitespace: true },  
 {  
 min: 3,  
 message: "field must be at least 3 characters",  
 },  
 ]}  
 hasFeedback  
>  
 <Input placeholder="e.g John" />  
</Form.Item>

In this example, the rules prop is used to add validation rules to the form field. The hasFeedback prop is used to display feedback icons according to the state of the input fields. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

Dynamic form field

Did you find this page helpful?