yxl-packages v0.0.0
@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
- 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';
- 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
.
- In your
main.ts
file, import 'reflect-metadata':
import 'reflect-metadata';
- 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.
10 months ago