ng-json-form-bootstrap
TypeScript icon, indicating that this package has built-in type declarations

0.0.3 • Public • Published

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.

Package Sidebar

Install

npm i ng-json-form-bootstrap

Weekly Downloads

2

Version

0.0.3

License

ISC

Unpacked Size

429 kB

Total Files

55

Last publish

Collaborators

  • ragaroto