form-schema-lib 🚀

A high-performance, professional-grade Angular library for building and rendering dynamic forms using a standardized JSON schema. Designed for flexibility, speed, and premium aesthetics.


---

✨ Features

- Intuitive Visual Designer: A spacious "Big Canvas" designer with smooth drag-and-drop mechanics.
- Dynamic Render Engine: Instant form generation from JSON schemas with full Reactive Forms support.
- Side-Drawer Properties: Context-aware configuration panel that slides in for a focused editing experience.
- Smart Validation: Built-in logic for field uniqueness, mandatory metadata, and real-time error highlighting.
- Responsive Layouts: Direct integration with the Bootstrap Grid system (col-12, col-6, etc.).
- Zero-Flicker Typing: Optimized change detection for ultra-smooth user interaction in preview mode.

---

🛠️ Installation

``bash
npm install form-schema-lib
`

> Note: This library depends on @angular/forms, @angular/cdk, and Bootstrap 5 (CSS) for layout. Ensure they are available in your project.

---

🚀 Quick Start

$3

Perfect for administrative panels where users need to design custom forms.

`typescript
import { SchemaFormBuilderComponent } from 'form-schema-lib';

@Component({
selector: 'app-designer',
standalone: true,
imports: [SchemaFormBuilderComponent],
template:
[initialSchema]="mySchema"
(schemaChange)="handleUpdate($event)">


})
export class DesignerComponent {
mySchema = { fields: [] };

handleUpdate(newSchema: any) {
console.log('Schema updated:', newSchema);
}
}
`

$3

Used to display and collect data from the forms you've built.

`typescript
import { SchemaFormViewerComponent } from 'form-schema-lib';

@Component({
selector: 'app-form-page',
standalone: true,
imports: [SchemaFormViewerComponent],
template:
[schema]="savedSchema"
(formSubmit)="handleSubmit($event)">


})
export class FormPageComponent {
handleSubmit(formData: any) {
console.log('User Input:', formData);
}
}
`

---

📝 Schema Structure

The library uses a simple, flat JSON object to represent your form:

`json
{
"title": "Registration Form",
"fields": [
{
"key": "user_name",
"label": "Full Name",
"type": "input",
"placeholder": "Enter your name...",
"width": "col-6",
"required": true
},
{
"key": "role",
"label": "User Role",
"type": "select",
"options": [
{ "label": "Admin", "value": "1" },
{ "label": "Editor", "value": "2" }
],
"width": "col-6"
}
]
}
`

---

🎨 Styling and Customization

The library is designed to inherit your project's typography and colors. You can easily override the designer's internal styles using CSS Variables (coming soon) or global selectors:

`css
/ Customizing the field wrappers in the designer /
.lib-field-wrapper {
border-radius: 12px;
background: #ffffff;
}

/ Customizing the properties drawer width /
.properties-drawer {
width: 450px;
}
`

---

🧱 Supported Field Types

- Input: Text, Email, Passwords.
- Number: Numeric inputs with validation.
- Date: Standard HTML5 date pickers.
- Checkbox: Simple toggles for boolean data.
- Select: Dropdown menus for single choice.
- MultiSelect: Tags or lists for multiple choices.
- Radio: Mutually exclusive selection buttons.
- File: Standard local file selection.

---

📦 Building and Publishing

`bash


Build the package

ng build form-schema-lib

Navigate to build output

cd dist/form-schema-lib

Publish to the registry

npm publish --access public
``

---

📄 License

MIT © ITWays