@overflo-srl/dynamic-form v3.0.0

@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>

BaseForm

new BaseForm()