App configuration

The provided configuration defines the structure for customizing the form settings in your application. You can use the LibConfig interface and LIB_FORM_CONFIG injection token to set up and manage these configurations globally.

Here there is extra from:

app.config

{
  provide: CMS_FORM_CONFIG,
  useValue: {
    formMode: 'merge',// data form from (backend and manual)
    parseToFormData: false,
    additionalPropertiesKey: 'x-render',
         additionalProperties: [
           {
            value: 'image',
            type: FormInputType
          },
          
          ]
    ngClass:
      'users-form-container flex flex-wrap gap-3 align-items-center justify-content-center xl:justify-content-start',
  },
}

Using additionalPropertiesKey to Render Custom Inputs

To render custom input types (like an image uploader), the form system allows you to define a key that links schema metadata to specific UI components.

How It Works

1. In the form configuration you specify:

   • additionalPropertiesKey: the name of the key in your JSON schema that will hold custom rendering instructions (e.g., 'x-render').

   • additionalProperties: an array that maps values (like 'image') to specific form input types.

   • you use the same key in the backend for example ('x-render') or any key you choose to specify how each field should be rendered.

   When the form engine parses the schema:

   • It checks for the key defined in additionalPropertiesKey (e.g., 'x-render').

   • If the value matches one of the values in additionalProperties (e.g., 'image'), it renders the field using the associated input type from FormInputType.

To add the input manual, you need to add the key and the value like , follow the example:

export interface User {
    id: number;
    name: string;
    age?: number;
    salary?:number;
    dateofbirth?:number;
    skills?:number;
  }
  //you override the manualInputs where you extand the cms Service
override manualInputsFn = (user?: User) =>
    [
      {
        key: 'name',
        value: user?.name,
      },
      {
        key: 'age',
        value: user?.age,
      },
      {
        key: 'salary',
        value: user?.salary,
      },
      {
        key: 'dob',
        value: user?.dateofbirth,
      },
      {
        key: 'skills',
        value: user?.skills,
      },
      
      {
        key: 'richtext',
        value: user?.department,
        inputType: FormInputType.richText
      },
] as FormInput<User>[];

manualInputsFn

This function allows you to define manual form inputs programmatically, independent of the backend schema. It's especially useful when you want to:

• Add custom fields that aren’t defined in the API schema.

• Control field visibility, validation, or behavior dynamically.

• Use advanced input configurations (like file upload, autocomplete, calendar, etc.).

manualInputsFn!: (item?: T) => Partial<FormInput>[];

• Type: A function that takes an optional item (the current model/data object) and returns an array of form input definitions.

• Return: An array of Partial<FormInput<T>> — each item represents a single form field.

The FormInputType enum defines all the supported input types that can be used in dynamic form rendering. These types are used in the FormInput.inputType field to control how each form field is displayed and behaves.

This makes the form system flexible, allowing you to define a wide range of input fields — from basic text boxes to advanced components like image uploads, date pickers, or drag-and-drop areas.

Available Input Types:

Type	Description
text	Standard text input.
textarea	Multiline text input.
number	Native number input.
inputNumber	Custom number input with better control/formatting.
email	Email input field with validation.
password	Password input field.
phone (tel)	Telephone input.
date	Date picker.
time	Time picker.
datetime	Combined date and time picker.
color	Color picker input.
checkbox	Boolean input.
triStateCheckbox	Checkbox with true, false, and null states
radio	Radio button group.
dropdown	Select dropdown field.
autocomplete	Autocomplete input with search capabilities
multiSelect	Select multiple options from a list.
switch	Toggle switch (on/off).
chips	Input with multiple tags or chips.
file	File upload input.
image	Image upload input, often with preview/crop support.
mask	Input field with a defined mask (e.g., phone number format).
dragAndDrop	Drag and drop file upload area.
timeDuration	Input for duration (e.g., "1h 30m").
templateRef	Custom input rendered using an Angular TemplateRef.
richText	Rich text (WYSIWYG) editor for formatted content.