Xây dựng Dynamic Form mạnh mẽ với Dynamic Field Kit

Trong quá trình phát triển frontend, đặc biệt là các hệ thống CMS, Admin Dashboard hay Form Builder, việc xử lý form động (dynamic form) luôn là một bài toán khá đau đầu.

Chúng ta thường gặp các vấn đề như:

• Render form dựa trên schema
• Điều kiện ẩn/hiện field
• Validation động
• Quản lý state form phức tạp
• Tái sử dụng field component

Và đó là lúc mình tìm thấy thư viện dynamic-field-kit — một giải pháp khá thú vị giúp xây dựng dynamic form theo hướng schema-driven một cách linh hoạt và dễ mở rộng.

npm:
https://www.npmjs.com/org/dynamic-field-kit

---

Dynamic Field Kit là gì?

dynamic-field-kit là một thư viện hỗ trợ xây dựng form động dựa trên schema configuration.

Thay vì hardcode từng input, select hay validation trong JSX, bạn chỉ cần mô tả form thông qua JSON/schema và hệ thống sẽ tự render.

Thư viện hỗ trợ:

• Dynamic form rendering
• Conditional fields
• Form state management
• Validation rules
• Reusable field system
• Schema-driven architecture

Điểm mình thích là cách tiếp cận khá clean và scalable cho các dự án lớn.

---

Khi nào nên dùng?

Thư viện này đặc biệt phù hợp với:

• CMS system
• Admin dashboard
• Survey form
• Workflow builder
• Internal tools
• No-code/Low-code platform
• Multi-step form

Nếu project của bạn có nhiều form thay đổi liên tục theo business logic thì đây là một hướng đi đáng cân nhắc.

---

Cài đặt

Ví dụ với Angular renderer:

npm install @dynamic-field-kit/angular

---

Ý tưởng hoạt động

Thay vì viết form như thế này:

<input />
<select />
<textarea />

Bạn sẽ mô tả bằng schema:

const fieldsSchema = [
  {
    fieldType: "string",
    fieldName: "title",
    placeholder: "Nhập tiêu đề",
    defaultValue: "",
    rules: {
      required: true,
    },
  },
];

Sau đó hệ thống sẽ tự động render UI tương ứng.

Đây là hướng tiếp cận cực kỳ phổ biến trong các enterprise application hiện nay.

---

Ví dụ Dynamic Form

Một ví dụ đơn giản:

const fieldsSchema = [
  {
    fieldType: "select",
    fieldName: "type",
    defaultValue: {
      value: "summary",
      label: "summary",
    },
    options: [
      { value: "title", label: "title" },
      { value: "summary", label: "summary" },
    ],
  },
  {
    fieldType: "string",
    fieldName: "title",
    placeholder: "Tiêu đề",
    defaultValue: "",
    rules: {
      required: false,
    },
  },
];

Sau đó render:

<ReactDynamicFields
  stateName="exampleForm"
  renderSchema={({ controller }) => (
    <form>
      {fieldsSchema.map((fieldSchema, index) => (
        <ReactDynamicField
          key={index}
          fieldSchema={fieldSchema}
          stateName="exampleForm"
        />
      ))}
    </form>
  )}
/>

---

Conditional Field cực kỳ hữu ích

Một tính năng mình đánh giá cao là fieldConditions.

Ví dụ:

fieldConditions: [
  {
    fieldName: "type",
    comparison: "deepEquals",
    value: {
      value: "title",
      label: "title",
    },
    action: {
      rules: {
        disabled: true,
      },
    },
  },
];

Tức là:

• Khi field type có giá trị title
• Field hiện tại sẽ bị disable

Cách khai báo này giúp business logic trở nên declarative hơn rất nhiều.

---

Ưu điểm

1. Schema-driven architecture

Toàn bộ form được quản lý bằng config.

Điều này giúp:

• Dễ maintain
• Dễ generate form từ backend
• Dễ tái sử dụng

---

2. Tách biệt UI và Business Logic

Frontend không cần hardcode quá nhiều.

Business logic nằm trong schema.

Đây là hướng thiết kế rất phù hợp cho enterprise project.

---

3. Dễ mở rộng

Bạn có thể:

• Custom renderer
• Tạo custom field
• Tích hợp validation riêng
• Kết nối API dynamic

---

4. Giảm boilerplate code

Những project có hàng chục form sẽ giảm đáng kể lượng code lặp.

---

Một vài hạn chế

Tất nhiên thư viện nào cũng có trade-off.

1. Learning curve

Nếu team chưa quen schema-driven architecture thì sẽ mất thời gian làm quen.

---

2. Debug khó hơn form thường

Khi logic nằm trong config/schema thì việc debug đôi lúc không trực quan bằng JSX thuần.

---

3. Overkill cho project nhỏ

Nếu chỉ có vài form đơn giản thì có thể chưa cần tới giải pháp này.

---

So sánh với cách làm truyền thống

Tiêu chí	Form truyền thống	Dynamic Field Kit
Tốc độ tạo form	Chậm	Nhanh
Reusable	Trung bình	Cao
Dynamic logic	Khó	Dễ
Scale lớn	Khó maintain	Tốt
Boilerplate	Nhiều	Ít

---

Góc nhìn cá nhân

Mình nghĩ xu hướng schema-driven UI sẽ ngày càng phổ biến.

Đặc biệt ở:

• SaaS platform
• Internal tools
• CMS
• Automation system

dynamic-field-kit là một hướng tiếp cận khá thú vị để giải quyết bài toán đó.

Dù chưa phải thư viện quá phổ biến, nhưng architecture của nó rất đáng để tham khảo nếu bạn đang xây dựng hệ thống form phức tạp.

---

Kết luận

Nếu bạn đang:

• Mệt mỏi với việc hardcode form
• Có nhiều business rule phức tạp
• Muốn tái sử dụng form tốt hơn
• Xây dựng hệ thống enterprise/admin

Thì dynamic-field-kit là một thư viện đáng để thử.

Thông tin thêm:

https://www.npmjs.com/org/dynamic-field-kit

---