ng-json-form-bootstrap v0.0.3

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

Textarea

Range

Radio

Dropdown

Checkbox

Base input default configuration

Enums

ControlType

Type

NgDynamicForm

This project was generated with Angular CLI version 10.1.1.