@yxl/form-builder

Installation

To install @yxl/form-builder, run the following command:

npm install yxl/form-builder

Make sure you have the following requirements installed:

• Node.js 16
• Angular 15

How to Use

1. Import the required modules in app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormBuilderModule } from '@yxl/form-builder';

2. Include the FormBuilderModule.forRoot() configuration in imports:

FormBuilderModule.forRoot({
  URLS: {
    baseUrl: 'https://API_URL/',
    listOfValues: ':LIST_VALUES_URL',
    upload: 'STORAGE_URL',
    listOfServices: 'LIST_ENDPOINT',
    getFormById: 'GET_ENDPOINT',
    submit: 'SUBMIT_ENDPOINT',
    getInbox: 'GET_ALL_ENDPOINT',
    getRequestDetails: 'GET_REQUEST_ENDPOINT',
  },
  STORAGE: {
    isLocalStorage: true,
    token: 'token',
    LanguageCode: 'lang',
    headers: {},
    httpOptions: {},
  },
}),

Notes: - You must have a token stored in the local storage with the key "token" or any string key passed to the STORAGE.token. - The language stored in the local storage with the key "lang" or any string key passed to the STORAGE.LanguageCode.

3. In your main.ts file, import 'reflect-metadata':

import 'reflect-metadata';

4. Use the <dfb-dynamic-form-builder> component in your Angular template:

<dfb-dynamic-form-builder
  [serviceCode]="serviceCode"
  (formSubmitted)="(null)"
  (formCanceled)="(null)"
></dfb-dynamic-form-builder>

Make sure you have the FormBuilderModule existing in the lazy loading module.

Styles

In this project, we follow a 4px grid system using the rem unit for spacing. To maintain consistent global styles, please visit the styles.scss file in the demo-app project.

Dynamic Forms Grid System using CSS Variables

We define spacing units and their corresponding values using CSS variables:

--spacing-unit: 1rem; // 16px
--0-25sn: calc(0.25 * var(--spacing-unit)); // 4px
--0-5sn: calc(0.5 * var(--spacing-unit)); // 8px
--0-75sn: calc(0.75 * var(--spacing-unit)); // 12px
--1sn: calc(1 * var(--spacing-unit)); // 16px
--1-25sn: calc(1.25 * var(--spacing-unit)); // 20px
--1-5sn: calc(1.5 * var(--spacing-unit)); // 24px
--1-75sn: calc(1.75 * var(--spacing-unit)); // 28px
--2sn: calc(2 * var(--spacing-unit)); // 32px

This README.md file provides instructions for installing and using the @yxl/form-builder package in an Angular project. It includes information on installation, requirements, configuration, and usage examples.