helpful-purple
helpful-purple10mo ago

Dynamic form field

Can u show an example where i can add multiple fields dynamically??
11 Replies
kapa.ai
kapa.ai10mo ago
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
kapa.ai10mo ago
<@560876002046377984> kapa.ai is still learning and improving, please let us know how it did by reacting below
helpful-purple
helpful-purple10mo ago
@kapa.ai i need an example for ant forms
kapa.ai
kapa.ai10mo 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
kapa.ai10mo ago
<@560876002046377984> kapa.ai is still learning and improving, please let us know how it did by reacting below
helpful-purple
helpful-purple10mo ago
@kapa.ai can u show me an example of dyanmic form in ant??
kapa.ai
kapa.ai10mo 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
kapa.ai10mo ago
<@560876002046377984> kapa.ai is still learning and improving, please let us know how it did by reacting below
helpful-purple
helpful-purple10mo ago
kapa.ai
kapa.ai10mo 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
kapa.ai10mo ago
<@560876002046377984> kapa.ai is still learning and improving, please let us know how it did by reacting below