Home

Awesome

ngx-dynamic-form

The ngx-dynamic-form is a library that works in Angular 16 with Bootstrap 5 to generate forms in a simple and dynamic way.

Table of Contents

Installation

To install the library, run:

yarn add @jvlsoft/ngx-dynamic-form

Then add the following styles:

@import "~bootstrap/dist/css/bootstrap.min.css";
@import '~bootstrap-icons/font/bootstrap-icons.css';
@import "~@ng-select/ng-select/themes/default.theme.css";

Note: Make sure your project has routing, otherwise the library won't work

Building the Project

To build the project, run:

yarn run build ngx-dynamic-form

Running Tests

To execute the unit tests via Karma, run:

yarn run test ngx-dynamic-form

Running the Project

To serve the project locally, run:

yarn run start demo-app

Then navigate to http://localhost:4200/ in your browser.

Usage

Here's a basic example of how to use the library in your Angular project:

import { DynamicFormComponent, FormInputComponent } from '@jvlsoft/ngx-dynamic-form';

@NgModule({
  imports: [
    DynamicFormComponent,
    // other imports
  ],
})
export class AppModule { }

In your component:

import { Component } from '@angular/core';

@Component({
  selector: 'app-dynamic-form',
  template: `<ngx-dynamic-form [config]="formConfig" [onlyFields]="false" title="User" [hasPrefix]="false"
        [saveButton]="false" [canGoBack]="false"></ngx-dynamic-form>`,
})
export class DynamicFormComponent {
  formConfig = [
    {
      type: FormInputComponent,
      name: 'username',
      class: 'col-lg-4 col-md-6 col-sm-12',
      helperText: 'Insert your username',
      label: 'Username',
      placeholder: 'John',
      validation: [Validators.required],
    },
    {
      type: FormInputComponent,
      name: 'email',
      class: 'col-lg-4 col-md-6 col-sm-12',
      helperText: 'Insert your company email',
      label: 'Email',
      placeholder: 'email@dominium',
      validation: [Validators.required],
    },
    // Other fields...
  ];
}

For: image

API

IFieldConfig

AttributeTypeDescription
typeType<IField>Type of HTML field.
namestringField name, this name will be the FormControlName. Example: 'name', 'email', etc.
classstringClass to apply to the field. Example: col-lg-4.
labelstringComponent label.
helperTextstringText to display below the field.
fieldTypestringHTML type attribute of the field. Example: 'text', 'password', 'email', 'submit', etc.
placeholderstringField placeholder.
styleobjectStyle to apply to the field. Example: { "background-color": "#fff" }.
ordernumberFields order. Field with order 1 goes first that with order 2.
disabledbooleanIf the field will be disabled.
readonlybooleanIf the field is readonly.
valueanyDefault value.
optionsIFieldOptionsObject with other options, this gives the possibility to add other functionalities.
componentComponentRef<any>Represents a component created by a ComponentFactory. Provides access to the component instance and related objects, and provides the means of destroying the instance.
validationValidatorFn[]Array of ValidatorFn.
asyncValidatorsAsyncValidatorFn | AsyncValidatorFn[]It accepts an AsyncValidatorFn or AsyncValidatorFn[] for async validator in reactive forms.
updateOn'change' | 'blur' | 'submit'The event name for control to update upon.

IInputConfig

AttributeTypeDescription
staticTextstringA text to display above the field.
minnumbermin attribute of html input tag.
stepnumberstep attribute of html input tag.
validStylebooleanIf is true show the valid style.

ICheckboxConfig

AttributeTypeDescription
firstLabelstringCheckbox first label.
lastLabelstringCheckbox last label.
hasLabelMarginbooleanIs true if the label has a left margin.

IRadioConfig

AttributeTypeDescription
classstringClass to apply to options.
optionsany[]Radio options.
checkedanyThe checked element.

ISelectConfig

AttributeTypeDescription
itemServiceIFieldServiceService to get the items from the database.
dynamicbooleanUsed for scrolling, searching on the server, and handling complex functions. If the data is simple, set dynamic to false.
loadingbooleanIndicates if the component is in a loading state.
autoLoadItemsbooleanIf true, items will be automatically loaded.
multiplebooleanIf true, multiple items can be selected.
clearablebooleanIf true, the selected item can be cleared.
searchablebooleanIf true, the select component will be searchable.
filter{ [key: string]: string | string[] | number | number[] | boolean }Filter to use on the service search query.
items[...[], ...any]Items to be displayed in the select component.
bindLabelstringThe property to bind as the label for each item.
bindValuestringThe property to bind as the value for each item.
groupBystringThe property to group items by.
limitnumberThe maximum number of items per query.
maxSelectedItemsnumberThe maximum number of items that can be selected.
method(query: any, skip: number, limit: number) => Observable<IRows>The method to fetch rows, returning an observable.
onChangeEventEmitter<any>Event emitter for change events.
transformData(data: any) => any[]Function to transform the data before displaying it.

ITextAreaConfig

AttributeTypeDescription
rowsnumberTextarea rows number.