From 0e7fec0d081146b6b067c4bd1e4356bef00d503f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Necati=20=C3=96zmen?= Date: Tue, 24 Dec 2024 09:46:03 +0300 Subject: [PATCH] docs(blog): update antd dynamic form (#6598) --- ...orm.md => 2024-12-20-antd-dynamic-form.md} | 31 +++++++++++++++++-- 1 file changed, 28 insertions(+), 3 deletions(-) rename documentation/blog/{2022-11-17-antd-dynamic-form.md => 2024-12-20-antd-dynamic-form.md} (96%) diff --git a/documentation/blog/2022-11-17-antd-dynamic-form.md b/documentation/blog/2024-12-20-antd-dynamic-form.md similarity index 96% rename from documentation/blog/2022-11-17-antd-dynamic-form.md rename to documentation/blog/2024-12-20-antd-dynamic-form.md index 93c30c85201b..e9ac6ef02797 100644 --- a/documentation/blog/2022-11-17-antd-dynamic-form.md +++ b/documentation/blog/2024-12-20-antd-dynamic-form.md @@ -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. @@ -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** @@ -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 ``: add() and remove(). + +- Is it possible to add validation to dynamic form fields? + Yes, you can utilize the rules prop on `` 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