@overflo-srl/dynamic-form

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

Supports the following form control types: select multipleselect text textarea radio checkbox date datetime inputchips

This library was developed and is maintained by Overflo team.

• Installation
• Usage examples
• Documentation
• Live demo

Installation

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

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,
],

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) help | string | undefined | Form field help tooltip (Will show after the label) required | boolean | undefined | Required form field order | number | 1 | Form field order controlType | 'select' | 'multipleselect' | 'text'| 'password' | 'textarea' | 'radio' | 'checkbox' | 'date' | 'datetime' | 'photos' | 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 | false | Readonly form field 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.