ragaroto / ng-json-form-bootstrap

A simple form builder that use a Json file to generate forms in Angular with Bootstrap UI

Bootstrap Json Form

---

Instal

Install the package

npm:

npm i ngx-json-form-bootstrap

Import it in your module file

import { NgJsonFormModule} from 'ng-json-form';

@NgModule({
  declarations: [ ... ],
  imports: [ 
    NgJsonFormModule, /* <--inside of imports */
    ...
  ]
})

Usage

All you need to do is provide an object for each Field in your form, following the interface below:

In your component, declare the questions Object:

interface Question {
  [field:string]: Object<ControlType>
  
}

Example 1: Single text field

In your component, declare the questions Object:

/* Minimum setup */
public questions = {
  "favorite-color": { /* Question Key */
    "label": "Favorite color?", /* <param-name> :  <param-value> */
  }
}

constructor(){}

// Handle the form value
onFormValueChanged(formValue) {
    console.log(formValue)
}

In your template.html add the component and bind the questions and the output to an method

<ng-json-form 
  [questions]="questions" 
  (valueChanged)="handleChanges($event)" >
</ng-json-form>

And you've got:

Example 2: Complex form

In your component, declare the questions Object:

public questions = {
  textboxExample: {
    key: 'textboxExample',
    controlType: 'textbox',
    label: 'Textbox Question',
    helpText: 'Please provide all information',
    required: false,
    order: 1,
    disabled: true,
    size: 12,
    type: 'text',
    value: 'The house of sunshine',
    
  },
  rangeExample: {
    key: 'rangeExample',
    controlType: 'range',
    label: 'Range question',
    step: 1,
    min: 50,
    max: 100,
    value: 25,
    order: 2,
    required: true,
    helpText: 'Please provide all information',
    readonly: false,
    disabled: false,
    size: 12,
    placeholder: ''
  },
  DropdownExample: {
    key: 'DropdownExample',
    controlType: 'dropdown',
    label: 'Dropdown question',
    required: true,
    order: 4,
    trackKey: 'id',
    viewValue: 'label',
    helpText: 'Please provide all information',
    value: {
      label: 'Apartament',
      id: 1
    },
    options: [
      {
        label: 'Apartament',
        id: 1
      },
      {
        label: 'House',
        id: 2
      },
      {
        label: 'Flat',
        id: 3
      }
    ]
  },
  RadioExample: {
    key: 'RadioExample',
    controlType: 'radio',
    label: 'Radio Question',
    required: true,
    order: 4,
    trackKey: 'id',
    viewValue: 'label',
    value: 2,
    options: [
      {
        label: 'radio option 01',
        id: 1
      },
      {
        label: 'radio option 02',
        id: 2
      },
      {
        label: 'radio option 03',
        id: 3
      }
    ],
    readonly: false,
    disabled: false,
    size: null,
    helpText: '',
    placeholder: ''
  },
  CheckBoxExampleA: {
    key: 'CheckBoxExampleA',
    controlType: 'checkbox',
    label: 'Checkbox item A',
    required: true,
    order: '8',
    value: null,
    readonly: false,
    disabled: false,
    size: null,
    helpText: '',
    placeholder: ''
  },
  CheckBoxExampleB: {
    key: 'CheckBoxExampleB',
    controlType: 'checkbox',
    label: 'Checkbox item B',
    required: true,
    order: '10',
    value: null,
    readonly: false,
    disabled: false,
    size: null,
    helpText: '',
    placeholder: ''
  },
  TextAreaExample: {
    key: 'TextAreaExample',
    controlType: 'textarea',
    label: 'Textarea question',
    rows: 3,
    order: 8,
    required: true,
    minLength: 2,
    maxLength: 100,
    readonly: false,
    disabled: false,
    size: 12,
    helpText: 'Hello, leave a cool message',
    placeholder: 'My Placeholder'
  }
}

constructor(){}

// Handle the form value
onFormValueChanged(formValue) {
    console.log(formValue)
}

In your template.html add the component and bind the questions and the output to an method

<ng-json-form 
  [questions]="questions" 
  (valueChanged)="handleChanges($event)" >
</ng-json-form>

And you've got:

IMPORTANT: The Questions Object is Immutable, the component it'self doesn't change the object, instead it emmits a new value from the output binding everytime the form changes

Input Types

All inputs extends Base Configuration

Textbox

Property	Type	Description
type	string | Type	Define the input type. Default: textbox
minLength	number	Min length of the field. Default null
maxLength	number	Max length of the field. Default null
pattern	RegExp | string	Pattern of the field. Default null

Textarea

Property	Type	Description
minLength	number	Min length of the field. Default null
maxLength	number	Max length of the field. Default null
rows	number	Number of rows. Default null

Range

Property	Type	Description
step	number	Distance between each step. Default 1
min	number	Min value of the scale. Default 0
max	number	Maximum value of the scale. Default 10
iconStart	string	Icon class of the icon in the beggining of the scale. Default: fa fa-plus
iconEnd	string	Icon class of the icon in the ending of the scale. Default: fa fa-minus

Radio

Property	Type	Description
options	Array<Object>	Options available to be chosen. Default []
trackKey	string	Whick key of option list should be used as value. Default id
viewValue	string	Whick key of option list should be used as label. Default label
value	string | number	Value. Default: ''

Dropdown

Property	Type	Description
options	Array<Object>	Options available to be chosen. Default []
trackKey	string	Whick key of option list should be used as value. Default id
viewValue	string	Whick key of option list should be used as label. Default label
value	Object	Value. Default: ''

Checkbox

Property	Type	Description
trackKey	string	Whick key of option list should be used as value. Default id
viewValue	string	Whick key of option list should be used as label. Default label
value	boolean	Value. Default: false

Base input default configuration

Property	Type	Description
controlType	ControlType	Define which input will be rendered: Options available: ["checkbox", "radio", "dropdown", "range", "textarea", "textbox", "list"] Default: textbox
disabled	boolean	Disabled status of the field Default: false
helpText	string	Short text describing the field, appears below the field and below above the errors messages Default: ''
key	string	Unique ID, Default: Object key or xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx
label	string	Label of the input, shown on top of the field Default: ''
order	number	Define which position in the order the field should be displayed Default: 1
placeholder	string	Value of the field placeholder, shown when there is no value in the field. Default: label value
readonly	boolean	Define if the field is text only or not; Default: false;
required	boolean	Define if the field is mandatory or not; Default: false;
size	number	Value of bootstrap grid, from 1(8.5%) to 12 (100%) Default: null
value	string | number	Value of the field Default: null

Enums

ControlType

Values
text
password
email
number
search
tel
file
image
url

Type

Values
checkbox
radio
dropdown
range
textarea
textbox
list

NgDynamicForm

This project was generated with Angular CLI version 10.1.1.

ng-json-form-bootstrap's Issues

The library works only in the root module

Hi Ragaroto,
Since the library contains BrowserModule, it becomes very problematic or impossible to import the library into different modules of the application. If library module is imported more than once, Angular gives error BrowserModule has already been loaded, to avoid this problem in NgJsonFormModule you need to import CommonModule instead of BrowserModule.
I would like you to consider this suggestion for the new version, with this change it will be much easier to use the library