English
VietnameseShared frontend composition
Field Form
Demo controlled renderer, nested group/repeater, schema Builder và adapter React Hook Form. Demo này không lưu dữ liệu và không phụ thuộc Post, Product hay route nghiệp vụ.
Controlled renderer
Nhập liệu trực tiếp ngoài RHF, xem value bất biến và lỗi client theo nested path.
Một primitive text field dùng được trong bất kỳ consumer nào.
Radio group dùng control Radio và RadioGroup có sẵn.
Number field dùng InputNumber với stepper và validation.
Sections
Repeater row có _rowId ổn định, nested field và thao tác reorder.
Keep at least 1 row.
Value hiện tại
{
"title": "Trang giới thiệu",
"seo": {
"metaTitle": "ChillCMS — Field Form",
"noIndex": false
},
"contentType": "article",
"readingTime": 5,
"sections": [
{
"_rowId": "row_intro",
"heading": "Giới thiệu",
"body": "Một row có identity ổn định và có thể chỉnh sửa độc lập."
}
]
}Client validation
Schema value hợp lệ.
Field Builder
Chỉnh sửa schema controlled, thêm field lồng nhau, duplicate, xóa, undo và reorder.
Field schema
Schema is valid.
Validation
Presentation
Conditional Logic
No conditions. Conditions are evaluated by immutable field key.
Advanced
Field key:
title (read-only)Validation
Presentation
Conditional Logic
No conditions. Conditions are evaluated by immutable field key.
Advanced
Field key:
seo (read-only)Nested fields
Drop a field here to nest it
Validation
Presentation
Conditional Logic
No conditions. Conditions are evaluated by immutable field key.
Advanced
Field key:
metaTitle (read-only)Validation
Presentation
Conditional Logic
No conditions. Conditions are evaluated by immutable field key.
Advanced
Field key:
noIndex (read-only)Validation
Presentation
Conditional Logic
No conditions. Conditions are evaluated by immutable field key.
Advanced
Field key:
contentType (read-only)Validation
Presentation
Conditional Logic
No conditions. Conditions are evaluated by immutable field key.
Advanced
Field key:
readingTime (read-only)Validation
Presentation
Conditional Logic
No conditions. Conditions are evaluated by immutable field key.
Advanced
Field key:
sections (read-only)Nested fields
Drop a field here to nest it
Validation
Presentation
Conditional Logic
No conditions. Conditions are evaluated by immutable field key.
Advanced
Field key:
heading (read-only)Validation
Presentation
Conditional Logic
No conditions. Conditions are evaluated by immutable field key.
Advanced
Field key:
body (read-only)React Hook Form adapter
Cùng schema được bind qua RemixFieldForm mà UI core không import RHF.
Một primitive text field dùng được trong bất kỳ consumer nào.
Radio group dùng control Radio và RadioGroup có sẵn.
Number field dùng InputNumber với stepper và validation.
Sections
Repeater row có _rowId ổn định, nested field và thao tác reorder.
Keep at least 1 row.
Adapter chỉ bind value/error vào RHF; submit và persistence vẫn thuộc consumer.
Contract overview
Các consumer khác nhau chỉ sở hữu schema/value lifecycle; Field Form chỉ sở hữu render và interaction.
UI core
Renderer, group, repeater, builder, validation UX.
Adapter
RHF binding, field state và error mapping.
Consumer
Load/save, server validation, authorization và persistence.