FlexiFields

This library was generated with Angular CLI version 15.2.0.

Usage

This package is currently in progress, and we are dedicated to improving its features in upcoming versions. Our primary focus is on Dynamic Form Rendering and Viewing. We eagerly welcome any feature requests or issues you might have. Your feedback is invaluable in making this package even better.

Inputs:

fields: Array of Dictionaries

Emitters (Outputs):

onFormValueChanged: On Every Field Change, onFieldFocusOut: On Every Field Focus out

Example for Input for fields:

[ { "name": "name", "label": "Name", "type": "text", "placeholder": "Enter your name", "required": true }, { "name": "email", "label": "Email", "type": "email", "placeholder": "Enter your email", "required": true }, { "name": "age", "label": "Age", "type": "number", "placeholder": "Enter your age", "required": false }, { "name": "gender", "label": "Gender", "type": "select", "options": ["Male", "Female", "Other"], "placeholder": "Select your gender", "required": true }, { "name": "subscribe", "label": "Subscribe", "type": "checkbox", "checkboxLabel": "Subscribe to newsletter", "required": false }, { "name": "birthdate", "label": "Birthdate", "type": "date", "placeholder": "Select your birthdate", "required": true }, { "name": "password", "label": "Password", "type": "password", "placeholder": "Enter your password", "required": true }, { "name": "country", "label": "Country", "type": "select", "options": ["USA", "Canada", "UK", "Australia"], "placeholder": "Select your country", "required": true }, { "name": "comments", "label": "Comments", "type": "textarea", "placeholder": "Enter your comments", "required": false } ]

How to Call in Parent Component HTML

<lib-flexi-fields [fields]="formFields" (formValueChanged)="onFormValueChanged($event)" (fieldFocusOut)="onFieldFocusOut($event)">

Code scaffolding

Run ng generate component component-name --project flexi-fields to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project flexi-fields.

Note: Don't forget to add --project flexi-fields or else it will be added to the default project in your angular.json file.

Build

Run ng build flexi-fields to build the project. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build flexi-fields, go to the dist folder cd dist/flexi-fields and run npm publish.

Running unit tests

Run ng test flexi-fields to execute the unit tests via Karma.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.