Generic Form Builder

The GenericFormBuilderComponent is a dynamic and reusable Angular component designed to simplify form creation based on a provided schema. It supports various input types, dynamic validation, real-time updates, and event handling, making it highly flexible for building forms programmatically.

How to use the component in your app :

1. import the component :

import {ListComponent} from '@tradinos/cms-frontend-form';

1. The selector for component , like it :

<lib-cms-generic-form-builder></lib-cms-generic-form-builder>

Features

1. Dynamic Form Generation:

   • Automatically builds a form based on a provided FormSchema.

2. Custom Templates:

   • Supports injecting custom templates for specific inputs or layouts.

3. Event Handlers:

   • Handles events for various input types like date pickers, checkboxes, file uploads, and dropdowns.

4. Dynamic Validation:

   • Applies validation rules dynamically based on the schema.

5. Real-Time Updates:

   • Listens to input state changes (e.g., disabled/enabled) and updates the form dynamically.

6. Custom Styling:

   • Supports applying dynamic CSS classes using the ngClass input.

Inputs

Input	Type	Description	Required
item	T	The entity object to pre-fill the form with its initial values.	No
formSchema	FormSchema	Defines the structure, inputs, and behavior of the form.	Yes
ngClass	NgClass['ngClass']	Custom CSS classes to apply to the form	No
templates	{ [key: string]: TemplateRef }	Custom templates for specific inputs or layouts.	Yes

Methods

Method	Description	Parameters
ngOnInit()	Initializes the component and sets up the form.	None
initializeForm()	Dynamically creates the form group and controls based on the schema.	None
onDateSelected()	Handles date selection and updates the form value.	input: FormInput<T>, date: Date
checkBoxChanged()	Handles checkbox state changes and updates the form value.	input: FormInput<T>, event: CheckboxChangeEvent
triStateCheckboxChanged()	Handles tri-state checkbox changes and updates the form value.	input: FormInput<T>, event: TriStateCheckboxChangeEvent
imageChanged()	Handles changes to image file inputs and updates the form value.	input: FormInput<T>, event: File
filesChanged()	Handles changes to file inputs (single or multiple) and updates the form value.	input: FormInput<T>, event: File | File[] | null
dropdownValueChanged()	Handles dropdown selection changes and updates the form value.	input: FormInput<T>, event: any
timeDurationChanged()	Handles time duration changes and updates the form value.	input: FormInput<T>, event: any
switchValueChanged()	Handles changes to switch/toggle inputs and updates the form value.	input: FormInput<T>, event: any
chipChanged()	Handles changes to chip inputs (e.g., tags) and updates the form value.	input: FormInput<T>, event: any