Skip to content

Commit

Permalink
docs(blog): update antd dynamic form (#6598)
Browse files Browse the repository at this point in the history
  • Loading branch information
necatiozmen authored Dec 24, 2024
1 parent 00f6c5f commit 0e7fec0
Showing 1 changed file with 28 additions and 3 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,17 @@ description: Easy way to creating dynamic forms in React CRUD apps with Ant Desi
slug: react-crud-app-with-dynamic-form-ant-design
authors: david_omotayo
tags: [react, Refine, tutorial, ant-design]
image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-11-17-antd-dynamic-form/social.png
image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2022-11-17-antd-dynamic-form/social-2.png
hide_table_of_contents: false
---

**This article was last updated on December 20, 2024, to include advanced styling techniques for Ant Design dynamic forms and integration with form libraries like Formik and React Hook Form. Additionally, the introduction has been updated for clarity.**

## Introduction

**TL;DR:** What is Ant Design Dynamic Form?
Ant Design provides a dynamic form that enables the developer to create flexible and interactive forms, where users can dynamically add or remove fields if needed, making it quite suitable for complex data collection.

Forms are one of the most adaptable elements in web development. They come in distinct structures for various use cases.

However, due to the sporadic complexity of the information they collect, they tend to grow larger with several fields, which can be a big turnoff for most users.
Expand All @@ -31,7 +36,8 @@ Steps we'll cover:
- [Adding icons](#adding-icons)
- [Validation](#validation)
- [Building the edit page](#building-the-edit-page)
- [Live StackBlitz Example](#example)
- [FAQ's](#faqs)
- [Why Use AntD Dynamic Forms?](#why-use-antd-dynamic-forms)

**Prerequisite**

Expand Down Expand Up @@ -1174,7 +1180,26 @@ This is a duplicate of the form component we created inside the `UserCreate` pag

That's it. We've successfully built an application that uses an API to post and edit response records using a **dynamic form**.

As a challenge, visit Refine's [documentation](https://refine.dev/docs/) to learn how you can add a `delete` button to the fields on the table and make your application a full-fledged CRUD application. Cheers!
As a challenge, visit Refine's [documentation](https://refine.dev/docs/) to learn how you can add a `delete` button to the fields on the table and make your application a full-fledged CRUD application.

## FAQ's

- What is a dynamic form?
A dynamic form is one that automatically changes its structure depending on what the user enters, often allowing users to add or remove fields dynamically.

- How do I start using dynamic fields from Ant Design?
To manage dynamic fields, use the component and methods provided by `<Form.List>`: add() and remove().

- Is it possible to add validation to dynamic form fields?
Yes, you can utilize the rules prop on `<Form.Item>` to extend your own validate logic.

## Why Use AntD Dynamic Forms?

Dynamic forms improve user satisfaction by:

- Simplifying User Input: Users only see fields they need, reducing form clutter.
- Flexibility: Provide the user with the facility to add or remove fields as required.
- Streamlining Complex Data: Collect additional details without overwhelming users with lengthy forms upfront. • Saving Time: Automate repetitive input scenarios with less manual work.

## Conclusion

Expand Down

0 comments on commit 0e7fec0

Please sign in to comment.