Semantica-dynamic-form-generator NPM

Angular Form Generator

A dynamic form generator for Angular with material design Example

Installation

//TODO

npm install @angular/material
npm install angular-form-generator

Setup

Import the FormGenerator Module and add it to the 'imports' of your module

import { FormGeneratorModule } from 'angular-form-generator';

@NgModule({
  imports: [FormGeneratorModule],
  ...
})
export YourModule { }

Set a link to a material theme in the <head> tag of index.html at the root of your application

<link href="node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">

Form Configuration

The form configuration is a json object that consists of required and optional parameters.

{
  "formId": '123456Test',
  "form": 'animals',
  "type": 'lion',
  "version": 'v1',
  "pages":[
    {
      "title": "Title",
      "groups": [
        {
          "orientation": 0,
          "fields": [
            {
              "fieldName": 'field',
              "type": 'text'
            }
          ]
        }
      ]
    }
  ]
}

The full form configuration documentation.

Usage

Create a new formConfig object. This will set all the required parameters to their default.

let formConfig = new FormConfig(formConfigJson);

Insert the <ngdg-form> inside your components html.

<div *ngFor="let pageObject of formConfig.pages">
  <ngdg-form [page]="pageObject" ... ></ngdg-form>
</div>

Form component

The inputs and outputs.

Parameter	Type	Description	Kind
page	Page	Insert a page object the form generator has to build	Input	Required
data	any	Insert an object with the already filled in data. Make sure that the fieldName in the formConfig follow the path in the data object. Example	Input	Optional
lov	Array key value pair	If the form has dropdowns that contain standard lovs	Input	Optional
readonly	boolean	Set if the whole form is readonly or not. Default: false	Input	Optional
focusChanged	EventEmitter	Emits an event wheter a form control is focused or blured	Output	Optional
registerForm	EventEmiiter	Emits an event when a new form is build. Returns a FormGroup	Output	Optional
next	EventEmitter	Emits an event when a button with type button is clicked	Output	Optional
submit	EventEmitter	Emits an event when a button with type submit is clicked	Output	Optional

Data example

A data object example:

{
  information: {
    firstName: "Donald",
    lastName: "Duck"
  },
  answers: {
    age: 10,
    height: "1.80 m"
  }
}

A compatible formConfig object:

{
  "formId": '123456Test',
  "form": 'animals',
  "type": 'lion',
  "version": 'v1',
  "pages":[
    {
      "title": "Title",
      "groups": [
        {
          "orientation": 0,
          "fields": [
            {
              "fieldName": 'answers.age',
              "type": 'number'
            },
            {
              "fieldName": 'answers.height',
              "type": 'text'
            }
          ]
        }
      ]
    }
  ]
}

@angular/animations @angular/common @angular/core @angular/forms @angular/platform-browser hammerjs semantica-material-datepicker

@infinitebrahmanuniverse/nolb-sema @everything-registry/sub-chunk-2730

1.0.0

7 years ago