@overflo-srl/dynamic-form

Generalized and responsive angular reactive form library combined with angular material.

Supports the following form control types: select multiple-select text textareaas docu radio checkbox date datetime inputchips number

This library was developed and is maintained by Overflo team.

• Installation
• Usage examples
• Documentation
• Live demo
• How to publish

Installation

Run npm i --save @overflo-srl/dynamic-form.

Import (Until last V2.*)

Add DynamicFormModule and BrowserAnimationsModule to the imports list in your angular module

import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 
import { DynamicFormModule } from 'dynamic-form';

imports: [
    BrowserAnimationsModule,
    DynamicFormModule,
],

Import (V3 and above)

Components now are standalone, so you just need to import the component

import { DynamicFormComponent } from "@overflo-srl/dynamic-form";

@NgModule({
  declarations: [
  ],
  imports: [
    DynamicFormComponent,
    ...
  ],
  exports: [
    DynamicFormComponent,
    ...
  ],
  providers: [
    { provide: MAT_DATE_LOCALE, useValue: 'it-IT' },
    {
      provide: MAT_DATE_FORMATS,
    DynamicFormModule,
],

  useValue: {
    parse: {
      dateInput: 'dd/MM/yyyy',
    },
    display: {
      dateInput: 'dd/MM/yyyy',
      monthYearLabel: 'MMM yyyy',
DynamicFormModule,

],

          dateA11yLabel: 'LL',
    DynamicFormModule,
],

      monthYearA11yLabel: 'MMMM YYYY',
    },
  },
DynamicFormModule,

],

    },
  ]
})
export class ExampleModule { }

Usage examples

• Readonly form for displaying data
• Form with default submit and required parameters
• Form with custom submit
• Form with full width fields
• Form with live preview

Readonly form for displaying data

Add the component in your component.html

<lib-dynamic-form [forms]="forms"></lib-dynamic-form>

Initialize the form in your component.ts

  forms: BaseForm[] = [];
  
  ngOnInit(): void {
    const forms = [
      new BaseForm({
        key: 'name',
        value: 'John',
        label: 'Name',
        controlType: 'text',
        readonly: true,
      }),
      new BaseForm({
        key: 'surname',
        value: 'Doe',
        label: 'Surname',
        controlType: 'text',
        readonly: true,
      }),
    ];

    this.forms = this.forms.concat(forms);
  }

Form with default submit and required parameters

Add the component in your component.html

<lib-dynamic-form [forms]="forms" (send)="save($event)" [showButtonAndEmit]="true" [showConfirmationDialog]="true"></lib-dynamic-form>

Initialize the form in your component.ts

  forms: BaseForm[] = [];
  
  ngOnInit(): void {
    const forms = [
      new BaseForm({
        key: 'name',
        value: 'John',
        label: 'Name',
        controlType: 'text',
        required: true
      }),
      new BaseForm({
        key: 'surname',
        value: 'Doe',
        label: 'Surname',
        controlType: 'text',
        required: true
      }),
    ];

    this.forms = this.forms.concat(forms);
  }
  
  save(formResult: {name: string, surname: string}) {
    console.log(formResult);
  }

Form with custom submit

Add the component in your component.html

<lib-dynamic-form #dynamicForm [forms]="forms" (send)="save($event)" [showButtonAndEmit]="false" [showConfirmationDialog]="false"></lib-dynamic-form>
<button (click)="confirm()">save</button>

Initialize the form in your component.ts

  @ViewChild(DynamicFormComponent) dynamicFormComponent!: DynamicFormComponent;
  forms: BaseForm[] = [];
  submitting: boolean = false;
  
  ngOnInit(): void {
    const forms = [
      new BaseForm({
        key: 'name',
        value: 'John',
        label: 'Name',
        controlType: 'text',
      }),
      new BaseForm({
        key: 'surname',
        value: 'Doe',
        label: 'Surname',
        controlType: 'text',
      }),
    ];

    this.forms = this.forms.concat(forms);
  }

  confirm() {
    this.submitting = true;
    this.dynamicFormComponent.onSubmit();
    this.submitting = false;
  }

  save(formResult: {name: string, surname: string}) {
    if (!this.submitting) {
      return;
    }
    console.log(formResult);
  }

Form with full width fields

Add the component in your component.html

<lib-dynamic-form [forms]="forms"></lib-dynamic-form>

Initialize the form in your component.ts

  forms: BaseForm[] = [];
  
  ngOnInit(): void {
    const forms = [
      new BaseForm({
        key: 'name',
        value: 'John',
        label: 'Name',
        controlType: 'text',
        readonly: true,
        fullWidth: true
      }),
      new BaseForm({
        key: 'surname',
        value: 'Doe',
        label: 'Surname',
        controlType: 'text',
        readonly: true,
        fullWidth: true
      }),
    ];

    this.forms = this.forms.concat(forms);
  }

Form with live preview

Add the component in your component.html

<lib-dynamic-form [forms]="forms" (send)="preview($event)" [showButtonAndEmit]="false" [showConfirmationDialog]="false"></lib-dynamic-form>
<div>{{fullName}}</div>

Initialize the form in your component.ts

  forms: BaseForm[] = [];
  fullName?: string;
  
  ngOnInit(): void {
    const forms = [
      new BaseForm({
        key: 'name',
        value: 'John',
        label: 'Name',
        controlType: 'text',
      }),
      new BaseForm({
        key: 'surname',
        value: 'Doe',
        label: 'Surname',
        controlType: 'text',
      }),
    ];

    this.forms = this.forms.concat(forms);
  }

  preview(formResult: {name: string, surname: string}) {
    const {name, surname} = formResult;
    this.fullName = `${name} ${surname}`;
  }

Documentation

• DynamicFormComponent
• BaseForm

DynamicFormComponent

<lib-dynamic-form></lib-dynamic-form>

Parameter | Type | Default | Description --------------|---------|-------------------------|---------------------------------------------------------------------- [forms]| BaseForm[] | [] | Form elements (send) | EventEmitter<any> | - | Returns form value [showButtonAndEmit] | boolean | true | Displays save button and enables (send) emitter [justHideButton] | boolean | false | Hides save button [partialSend] | boolean | true | Returns form result even if invalid [showConfirmationDialog] | boolean | true | Displays confirmation dialog

BaseForm

new BaseForm()

Parameter | Type | Default | Description --------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------|--------------------------------|---------------------------------------------------------------------- value | any | undefined | Value of the form field key | string | empty string | Form field property name (will match the returned value) label | string | empty string | Form field label (Visible field name) required | boolean | undefined | Required form field order | number | 1 | Form field order controlType | 'select' |'number' | 'multiple-select' | 'text' | 'textarea' | 'radio' | 'checkbox' | 'date' | 'datetime' | 'inputchips' | 'currency' | empty string | Form field type type | string | empty string | input type (works only with controlType text and textarea) options | { key: string; value: any; }[] | [] | Select options (works only with controlType select and multipleselect) optionsFunc | (form: any) => { key: string; value: any }[] | undefined | Arrow function which take a form as parameter and returns an array of options ( {key: string; value: any} ). The returned array will replace the current array of options for the select. searchWithDebounceFunc | (searchValue: string) => Promise<SelectOptionModel[]> | undefined | Async arrow function implemented on select search and taking the search value as parameter. It will replace the options given in the options property with the options returned from this function. This property is only implemented in controls of types select and the options value should not be an Object. debounceTime: number | number | 300 | A number used to set the debounce time of searchWithDebouceFunc. readonly | boolean or (form) => boolean | false | Readonly flag or function fullWidth | boolean | false | Full width form field modifyValueOnValueChange | (value: string) => string | undefined | Arrow function implemented on value change of the input and taking that value as parameter. It will replace the current value with the string returned from this function. This property is only implemented in controls of types text, textarea, and password. validators | CustomValidator[] | undefined | An array of validators that will be added to the control. It can be used to set many CustomValidator returning null or a CustomError containing a message that will be displayed on top of form control. if | (form) => boolean | (form) => form.active = true | Function that if true, shows the field in the form. If false, hides it

How to publish

Run the following command in main section:

npm run publish